-
Android小项目——新闻APP
2019-02-26 19:25:42在公司学习了一段时间Android知识,决定做一个小项目,目的是学会运用所学的基础知识,在这里记录一下开发历程,大家可以把它看成一款入门级练手的 Demo 应用吧~ 项目介绍: 类型: 新闻APP(低仿今日头条) ...前言:
在公司学习了一段时间Android知识,决定做一个小项目,目的是学会运用所学的基础知识,在这里记录一下开发历程,大家可以把它看成一款入门级练手的 Demo 应用吧~
项目概述:
类型:
新闻APP(低仿今日头条)
基本功能:
欢迎页面加载(3s,点击可跳过)——Activity相关
用户注册/登录 ——SQLite运用
横向滑动列表显示新闻类别——TabLayout、ViewPager、FragmentPagerAdapter的应用
底部菜单栏 切换——Fragment运用
–-主页(显示新闻列表)——ListView
–-设置(退出应用、退出登录、清空缓存)——Activity管理、SharePreference
–-我的(账号安全、新闻收藏夹)——SQLite
新闻列表下拉、上滑实现刷新——自定义ListView
逐条收藏新闻、删除新闻——SharePreference
仿UI界面——各类控件运用
点击查看新闻详情 —— WebView
用户界面更换头像功能——Android运行时权限、多媒体、Content Provider
源码及下载地址:
https://download.csdn.net/download/qq_34149526/10977199
PS:
最近有不少朋友反馈程序闪退问题,我查看了一下,是因为我采用的数据接口(天行数据)请求下来的数据中,图片链接的数据为空(之前一直是正常数据),导致解析图片时空指针异常,最终程序闪退。json数据如下:
{ "code": 200, "msg": "success", "newslist": [{ "ctime": "2019-07-18 00:00", "title": "空间科学卫星:迈向空间科学强国", "description": "新华科技", "picUrl": "",--------------->此处为空!!! "url": "http:\/\/www.xinhuanet.com\/tech\/2019-07\/18\/c_1124767044.htm" }, …… }
修改方法一:替换含有图片数据接口,可采用聚合数据等(使用自行百度),注意修改代码中的数据字段名!!!
修改方法二:在代码中解析图片的地方加上非空校验,程序不会崩溃,但是新闻列表中不会显示图片。
修改方法三:自行想办法解决~哈哈
下面简单贴一下修改方法二: //针对以下几个类做非空校验,希望大家以我为鉴,养成良好编码习惯。 1、MyBitmapUtils.java: public Bitmap getBitmap(String url) { if(TextUtils.isEmpty(url)){ return null; } Bitmap bitmap; …… } 2、HttpUtils.java: public static Bitmap decodeUriAsBitmapFromNet(String imgUrl) { if(TextUtils.isEmpty(imgUrl)){ return null; } URL fileUrl = null; Bitmap bitmap = null; …… } 3、NewsAdapter.java: @Override public View getView(int position, View convertView, ViewGroup parent) { …… if(news.getNews_img()!=null) { viewHolder.newsImg.setImageBitmap(news.getNews_img()); } …… } 4、NetCacheUtils.java: private Bitmap downLoadBitmap(String url) { …… } finally { if (conn != null) { conn.disconnect(); } } …… }
关于界面无法显示内容,原因是我申请的天行数据的API接口调用次数已用完(当时我是有10万次的免费调用次数,不得不感叹你们的强大),具体解决方法是更换TechFragment、MiliFragment、SportFragment、EnteFragment四个类里面的url地址,原地址已无法正常请求数据。可以自己去天行数据申请免费接口,替换即可(具体url格式参考天行数据官方文档,我已经很久不用它了)。
----------华丽分割线----------
下面进入重点,开始介绍这个项目
1、项目结构:
类文件:
资源文件:
2、主要功能及其代码实现:
欢迎页面:(持续时间为3s);
利用handler机制并开启一个线程,实现展示欢迎页面3s后页面跳转;
final Message message = new Message(); final Thread thread = new Thread(new Runnable() { @Override public void run() { try { Thread.sleep(3000); message.what = 1; handler.sendMessage(message); } catch (InterruptedException e) { e.printStackTrace(); } } });
欢迎页面加载完毕后会判断是否有用户登录,若没有用户登录,会跳转到注册&登录页面:
final Handler handler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); if (msg.what == 1) { //判断用户是否登录 boolean userIsLogin = (boolean) SharedPreUtil.getParam(WelcomeActivity.this, SharedPreUtil.IS_LOGIN, false); if (userIsLogin) { Intent intent = new Intent(WelcomeActivity.this, MainActivity.class); startActivity(intent); } else { Intent intent = new Intent(WelcomeActivity.this, LoginOrRegisterActivity.class); startActivity(intent); } finish(); } else if (msg.what == 0) { thread.interrupt(); } } };
注册或登录页面:
“注册”和“登陆”功能的实现主要是应用的SQLite数据库存储技术;
注册——存:
SQLiteDatabase db = dbHelper.getWritableDatabase(); String username_str = username.getText().toString(); String userpassword_str = userpassword.getText().toString(); String repassword_str = repassword.getText().toString(); if (userpassword_str.equals(repassword_str)) { ContentValues values = new ContentValues(); //组装数据 values.put("name", username_str); values.put("password", userpassword_str); db.insert("User", null, values); startActivity(new Intent(RegisterActivity.this, LoginActivity.class)); finish(); }
登陆——取:
if (cursor.moveToFirst()) { String userpassword_db = cursor.getString(cursor.getColumnIndex("password")); if (userpassword_str.equals(userpassword_db)) { SharedPreUtil.setParam(LoginActivity.this, SharedPreUtil.IS_LOGIN, true); SharedPreUtil.setParam(LoginActivity.this, SharedPreUtil.LOGIN_DATA, username_str); //user.setUsername(username_str); //user.setPassword(userpassword_str); Intent intent = new Intent(LoginActivity.this, MainActivity.class); TimeCount.getInstance().setTime(System.currentTimeMillis()); startActivity(intent); finish(); } else { Toast.makeText(LoginActivity.this, "密码错误,请重新登录", Toast.LENGTH_SHORT).show(); } }
另外在实现“注册”中上传头像功能时涉及到一个小知识点——运行时权限;因为要访问图库:
若用户不选择上传,程序会默认使用一个给定好的图片作为用户头像。
@Override public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) { switch (requestCode) { case 1: if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) { openAlbum(); } else { Toast.makeText(this, "You denied the permission", Toast.LENGTH_SHORT).show(); } break; } } private void openAlbum() { Intent intent = new Intent("android.intent.action.GET_CONTENT"); intent.setType("image/*"); startActivityForResult(intent, CHOSSE_PHOTO); } @RequiresApi(api = Build.VERSION_CODES.KITKAT) @Override public void onActivityResult(int requestCode, int resultCode, Intent data) { switch (requestCode) { case CHOSSE_PHOTO: if (resultCode == -1) { String imgPath = AlbumUtil.handleImageOnKitKat(this, data); setHead(imgPath); } break; default: break; } }
用户注册登陆后,即进入主页面:默认为科技新闻,左右滑动即可切换新闻类别;
新闻列表的显示原理及ListView、数据源与Adapter三者相结合,呈现出该画面;
final String url = "http://api.tianapi.com/keji/?key=7d829a4176fef4ad7409c2dc129905ed&num=30"; private View view; private LoadListView mListView; private List<News> newsList; private NewsAdapter adapter;
其中数据源的获取涉及到了HTTPClient的GET请求网络资源以及解析json数据的相关知识;
JSONObject jsonObject = new JSONObject(jsonData); JSONArray jsonArray = jsonObject.getJSONArray("newslist"); for (int i = 0; i < 10; i++) { JSONObject json_news = jsonArray.getJSONObject(i); String imgUrl = json_news.getString("picUrl"); /** * 采取三级缓存策略加载图片 */ Bitmap bitmap = myBitmapUtils.getBitmap(imgUrl); String title = json_news.getString("title"); String date = json_news.getString("ctime"); String author_name = json_news.getString("description"); String url = json_news.getString("url"); Log.d(TAG, "url:*-*-*-*-*-*-*" + imgUrl); News news = new News(bitmap, title, url, imgUrl, date, author_name); newsList.add(news); getActivity().runOnUiThread(new Runnable() { @Override public void run() { adapter.notifyDataSetChanged(); } });
该页面同样实现了下拉&上滑刷新新闻的功能:
下拉刷新:
上滑加载:
该功能具体实现请参考——ListView实现上拉加载&下拉刷新;
删除新闻:
在新闻列表点击每条新闻中的×号可完成新闻删除。
@Override public void click(View view) { Toast.makeText(getContext(), "该新闻已删除!", Toast.LENGTH_SHORT).show(); newsList.remove(Integer.parseInt(view.getTag().toString())); adapter.notifyDataSetChanged(); }
为每一个ListView item设置一个鼠标监听器,在remove方法中传入item的索引位置即可完成新闻列表的删除。
新闻详情页面:(及加载提示)
代码实现:
show_news.getSettings().setJavaScriptEnabled(true); Intent intent = getIntent(); final String news_url = intent.getStringExtra("url"); final String news_title = intent.getStringExtra("title"); final String news_date = intent.getStringExtra("date"); final String news_author = intent.getStringExtra("author"); final String news_picurl = intent.getStringExtra("pic_url"); show_news.loadUrl(news_url);
获得intent对象中由上一个页面传来的新闻URL,将WebView初始化后进行加载;完成页面详情的展示。
mDialog = new ProgressDialog(ShowNewsActivity.this); mDialog.setMessage("玩命加载ing"); show_news.setWebViewClient(new WebViewClient() { //网页加载时的回调 @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view, url, favicon); if (!mDialog.isShowing()) { mDialog.show(); } } //网页停止加载时的回调 @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); // 如果没有显示,则显示 if (mDialog.isShowing()) mDialog.dismiss(); } });
实例化ProgressDialog对象,设置标题与提示信息,以对用户进行友好提示。
新闻收藏:
代码实现:
主要是利用SQLite存储整个收藏新闻信息;
collect_news.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { collect_news.setImageResource(R.drawable.favorite_selected); SQLiteDatabase db = helper.getWritableDatabase(); ContentValues values = new ContentValues(); //组装数据 values.put("news_url", news_url); values.put("news_title", news_title); values.put("news_date", news_date); values.put("news_author", news_author); values.put("news_picurl", news_picurl); db.insert("Collection_News", null, values); db.close();
设置页面:
清空缓存:
因为在加载新闻列表时对新闻图片采取了三级缓存策略(网络,本地文件,内存),所以会产生一定的缓存,该功能会清理掉所有缓存;
代码实现:
// 获取文件 //Context.getExternalFilesDir() --> SDCard/Android/data/你的应用的包名/files/ 目录,一般放一些长时间保存的数据 //Context.getExternalCacheDir() --> SDCard/Android/data/你的应用包名/cache/目录,一般存放临时缓存数据 public static long getFolderSize(File file) throws Exception { long size = 0; try { File[] fileList = file.listFiles(); for (int i = 0; i < fileList.length; i++) { // 如果下面还有文件 if (fileList[i].isDirectory()) { size = size + getFolderSize(fileList[i]); } else { size = size + fileList[i].length(); } } } catch (Exception e) { e.printStackTrace(); } return size; } /** * * 清除本应用内部缓存(/data/data/com.xxx.xxx/cache) * * * * @param context */ public static void cleanInternalCache(Context context) { deleteFilesByDirectory(context.getCacheDir()); }
退出应用:
用户点击后直接退出程序并返回桌面。
代码实现:
专门创建了一个用户维护所有活动(页面)的工具类,当用户点击退出按钮时实际调用exit方法,结束活动类表中每一个活动,并执行System.exit(0);退出。
public class ApplicationUtil extends Application { private List<Activity> mList = new LinkedList<Activity>(); private static ApplicationUtil instance; private ApplicationUtil() { } public synchronized static ApplicationUtil getInstance() { if (instance == null) { instance = new ApplicationUtil(); } return instance; } // 添加Activity到列表中维持 public void addActivity(Activity activity) { mList.add(activity); } public void exit() { try { for (Activity activity : mList) { if (activity != null) { activity.finish(); } } } catch (Exception e) { e.printStackTrace(); } finally { System.exit(0); } } }
我的:
账号安全:
该功能即修改用户基本信息;本质是对SQLite的应用;
收藏夹:列举曾收藏过的所有新闻;
----------华丽分割线----------
至此,项目介绍完毕。
-
demo:飞机大战游戏 python小项目
2020-11-30 19:22:50记得刚学python那会,作过一个飞机大战小项目,这个项目非常经典,可以帮助初学者提高动手能力,今天把它分享出来一、项目介绍二、项目代码1.首先安装库2.主要python代码三、说明:代码功能都在注释里面,我就不做...记得刚学python那会,作过一个飞机大战小项目,这个项目非常经典,可以帮助初学者提高动手能力,今天把它分享出来
一、项目介绍
先放几张图片
二、项目实现
1.安装库
pip install pygame
2.主要python代码
import pygame from pygame.locals import * import random #https://blog.csdn.net/qq_36079986/article/details/110395731 class HeroPlane(object):# 创建一个飞机的英雄类 def __init__(self,screen_temp): # 始化方法 self.x = 200 self.y = 500 self.image = pygame.image.load('./img/hero1.png') self.screen = screen_temp# 因为在display方法中使用到了screen方法# 但是在类中没有 也不能调用 # 所以说 以传参的方法传递到类中 self.bullet_list = [] def display(self):# 创建一个展现飞机的方法 herp_x1, herp_y1, herp_x2, herp_y2, herp_x3, herp_y3 = -100, -100, -100, -100, -100, -100 self.screen.blit(self.image,(self.x, self.y)) for bullet in self.bullet_list:###遍历子弹类对象,赋值给bullet herp_x1, herp_y1, herp_x2, herp_y2, herp_x3, herp_y3 = bullet.display()###### bullet对象调用display方法, 显示子弹 bullet.move() if self.bullet_list[0].y < 0: del self.bullet_list[0] return herp_x1, herp_y1, herp_x2, herp_y2, herp_x3, herp_y3 def move_left(self): self.x -= 50 def move_right(self): self.x += 50 def move_up(self): self.y -= 50 def move_down(self): self.y += 50 def fire(self): print(len(self.bullet_list),'个子弹##########################################') self.bullet_list.append(HeroBullet(self.screen,self.x, self.y)) class HeroBullet(object): def __init__(self,screen_temp,x_temp,y_temp): self.x = x_temp self.y = y_temp self.image = pygame.image.load('./img/bullet.png') self.screen = screen_temp def display(self): self.screen.blit(self.image,(self.x - 22, self.y-22)) self.screen.blit(self.image, (self.x + 39, self.y-22)) self.screen.blit(self.image, (self.x + 100, self.y-22)) return self.x - 22, self.y - 22, self.x + 39, self.y - 22, self.x + 100, self.y - 22 def move(self): self.y -= 1 class EnemyPlane(object): def __init__(self,screen_temp): self.ra = random.randint(0,2) self.x = random.randint(0,400) self.y = 0 self.image = pygame.image.load('./img/enemy1.png') self.screen = screen_temp self.bullet_list = [] if 0<=self.x<=540: if self.ra == 0: self.flag = "left" elif self.ra == 1: self.flag = "right" else: self.flag = 'middle' def display(self): self.screen.blit(self.image, (self.x, self.y)) def move(self): if self.x < 0: self.flag = "left" elif self.x > 450: self.flag = 'right' if self.flag == "left": self.x += 2 elif self.flag == 'right': self.x -= 2 self.y += 0.1 def fire(self): if (random.randint(0,50) == 1): self.bullet_list.append(EnemyBullet(self.screen, self.x, self.y)) # print(len(self.bullet_list),'颗敌方子弹') for bullet in self.bullet_list: bullet.display() bullet.move() if bullet.y > 700: del bullet class EnemyBullet(object): def __init__(self,screen_temp,x,y): self.x = x + 30 self.y = y + 90 self.image = pygame.image.load('./img/bullet-1.gif') self.screen = screen_temp def display(self): self.screen.blit(self.image,(self.x, self.y)) def move(self): self.y+= 10 def key_control(hero_temp): for event in pygame.event.get(): # 判断输入类型 if event.type == QUIT:#判断是否是点击了退出按钮 print("exit") exit() elif event.type == KEYDOWN:#判断是否是按下了键# 如果是键盘事件(键盘按下事件) if event.key == K_a or event.key == K_LEFT: hero_temp.move_left() elif event.key == K_d or event.key == K_RIGHT: hero_temp.move_right() elif event.key == K_w or event.key == K_UP: hero_temp.move_up() elif event.key == K_s or event.key == K_DOWN: hero_temp.move_down() elif event.key == K_SPACE:#检测按键是否是空格键 hero_temp.fire() def main(): screen = pygame.display.set_mode((480, 650), 0, 32) # 使用screen资源来创建背景# 返回值是一个资源 pygame.display.set_caption("aircraft game") # 设置窗口标题 background = pygame.image.load('./img/background.png')## ./ 当前路径 ../ 上一级路径 / 根目录 hero = HeroPlane(screen) enemy_list = [] j = 0 while True: screen.blit(background, (0, 0)) # 资源中的blit方法能够加载游戏的画面 herp_x1, herp_y1, herp_x2, herp_y2, herp_x3, herp_y3 = hero.display() #####刷新 if len(enemy_list) <= 10: enemy_list.append(EnemyPlane(screen)) if enemy_list[0].y >= 700: del enemy_list[0] for enemy_each in enemy_list : # enemy_each.fire() enemy_each.move() enemy_each.display() # print(len(enemy_list), '个敌机') if (enemy_each.x <= herp_x1 -10 <= enemy_each.x + 80 and enemy_each.y -10<= herp_y1<= enemy_each.y + 90) or (enemy_each.x -10 <= herp_x2<= enemy_each.x + 80 and enemy_each.y -10<= herp_y2<= enemy_each.y + 90) or (enemy_each.x-10 <= herp_x3<= enemy_each.x + 80 and enemy_each.y -10<= herp_y3<= enemy_each.y + 90): enemy_list.remove(enemy_each) # print(len(enemy_list), '个敌机') print('jizhon') # print(hero.x,type(hero.x)) if j % 100 == 5: print(len(enemy_list),'个敌机') pygame.display.update() ### 加载游戏 key_control(hero)# 调用键盘事件函数 j += 1 # print(herp_x1, herp_y1, herp_x2, herp_y2, herp_x3, herp_y3) if __name__ == '__main__': main()
三、说明:
代码功能都在注释里面,我就不做过多解释了;与本项目有关的图片数据我传到资源里面了,大家可以免费下载,我把代码和数据都打包到一起了,大家下载下来导入库就可以直接一些了。
四、完整版代码及数据 下载地址(下载就能用)
https://download.csdn.net/download/qq_36079986/13207925
欢迎一起完善项目 -
java练习小项目(一)
2018-10-10 10:20:46学习java有一段时间了,都是处于那种三天打鱼,两天晒网的状态,没有效率,因为方法不对,一直是在看资料,看...好吧,这样就开始了自己的第一个小项目,坚持下来,会发现自己每天过得好充实,开始的时候是找了一...学习java有一段时间了,都是处于那种三天打鱼,两天晒网的状态,没有效率,因为方法不对,一直是在看资料,看视频,并没有实际上手项目,就算当时看了,记住了,最后还是不会用,或者说要到用的时候不会用。这样学下去,根本没有任何效果,反思反思再反思,为什么有的人一个星期就能理解个大概了,因为他一直玩代码啊~~~
好吧,这样就开始了自己的第一个小项目,坚持下来,会发现自己每天过得好充实,开始的时候是找了一个飞机游戏,跟着视频敲代码,虽然第一遍不懂,那就再来一遍,两遍不懂,那就来三遍,一遍一遍的理清逻辑,搞清楚方法之间的调用关系。记得有人跟我说过,招聘要求有几年经验,并不是说真正的非得工作那么几年,而是有那么几年的代码量。
总之,勤能补拙。
下面是我的小游戏最终实现的效果
有点丑,因为没有图片处理技术,慢慢来吧。然后说说这个项目中遇到的问题。
1:引用出错
Date自动引用会出现两个,一个是java.util,一个是java.sql,因为之前不懂,就随便到了一个包,结果一直出错,却又找不到原因,util是工具包,sql始于数据库相联系——导包要根据实际需要仔细看清楚,不要觉得自动提示的东西都是对的,看也不看直接导
2:初步学习,先知道怎么用,不要急于去研究那些看不懂已经封装好的内部的东西,越看越晕。
3:要让物体动起来,需要借助于线程,所以线程一定是进阶的关键点
4:算法很重要,但不要对算法死记硬背,要去理解,实在理解不了也不要老是花时间去深究,会陷入死循环,有时候,需要用时,百度一大堆,关键是要有那种思想,思维里有该用什么,,至于怎么用,度娘会帮你。
5:仔细一些,我在做的时候,创建了很多工程,每个工程里面可能会出现一些与其他工程一样的类名,然后你懂得,就可能没有及时关闭上一个工程的某个类,却又在下一个工程中运行同名类,然后错误,一直纠结哪里出错。
6:一定要静下心来,要做到不易被外界打扰,能够专心按照自己的逻辑去撸代码,一定要建立一套自己的思维体系。
7:最后一点,熟能生巧!
技能总结:
1:双缓冲解决闪屏
private Image offScreenImage = null;
public void update(Graphics g) {
if (offScreenImage == null)
offScreenImage = this.createImage(Constant.GAME_WIDTH,Constant.GAME_HEIGHT);
Graphics gOff = offScreenImage.getGraphics();
paint(gOff);
g.drawImage(offScreenImage, 0, 0, null);// 内存中先画一个图片进行缓存2:碰撞检测
飞机与子弹看成两个矩形,获取两个矩形坐标,宽度和高度,调用rect里面的intersects来检测是否相撞
3:图片轮播
爆照效果:多张图片放在数组中,依次读取
,
依次播放
4:存活计时
开始和死亡的时间计数,然后做差
-
Java SSM练手小项目-手把手带你搭建一个基于SSM框架的人力资源管理后台系统
2018-03-11 00:22:54相信很多小伙伴在学习完SSM三大架构以后,不知道该如何找到一个简单容易上手的项目进行实战训练,经常在博客上看到一个不错的项目下载下来以后全部都是代码,无处下手。因此本文力求以最简单易懂的项目结构和代码...前言
相信很多小伙伴在学习完SSM三大架构以后,不知道该如何找到一个简单容易上手的项目进行实战训练,经常在博客上看到一个不错的项目下载下来以后全部都是代码,无处下手。因此本文力求以最简单易懂的项目结构和代码搭建一个还较为完整(即从登录到退出的整个流程)的后台系统。(适合新手)
整个项目的操作流程动态图如下(由于CSDN对上传图片大小有限制,这里录制的gif画面很不清晰,点击图片查看更清晰):
(点击图片查看)已经将服务部署到服务器,可以在线进行体验: 线上体验链接
项目的整体结构:
用到的技术栈有:
- 框架:SSM
- 数据库:MySQL
- 前端框架:Bootstrap快速搭 搭建JSP页面
- 项目管理:MAVEN
- 开发工具:Intellij IDEA
- 开发环境:Windows
从这个项目中你可以完整独立地体验从前端到后台的搭建过程,以及使用SSM框架完成后台的CRUD整个流程。
注:项目代码下载链接:SSM_HRMS代码下载链接 .一、准备
准备部分主要包括数据库建表、SSM框架的搭建启动。
1 数据库建表
tbl_emp表:DROP TABLE IF EXISTS `tbl_emp`; CREATE TABLE `tbl_emp`( `emp_id` int(11) UNSIGNED NOT NULL auto_increment, `emp_name` VARCHAR(22) NOT NULL DEFAULT '', `emp_email` VARCHAR(256) NOT NULL DEFAULT '', `gender` CHAR(2) NOT NULL DEFAULT '', `department_id` int(11) NOT NULL DEFAULT 0, PRIMARY KEY(`emp_id`) ) ENGINE=INNODB DEFAULT CHARSET=UTF8;
tbl_dept表:
DROP TABLE IF EXISTS `tbl_dept`; CREATE TABLE `tbl_dept`( `dept_id` int(11) UNSIGNED NOT NULL auto_increment, `dept_name` VARCHAR(255) NOT NULL DEFAULT '', `dept_leader` VARCHAR(255) NOT NULL DEFAULT '', PRIMARY KEY(`dept_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
对应的实体类见bean/Employee.java和bean/Department.java。
(在测试部分,运行EmployeeMapperTest.java 和 DepartmentMapperTest.java,可以将数据插入到表中)2 SSM项目搭建与启动
(1)本次项目使用的是MAVEN进行JAR包的管理,首先导入项目中可能用到的依赖包:
见pom.xml.(2)Web项目的配置文件:web.xml:
见WEB-INF/web.xml.(3)Spring容器配置文件:applicationContext.xml:
见resources/applicationContext.xml.(4)SpringMVC配置文件:springmvc.xml:
见resources/springmvc.xml.3 测试
写好上述配置文件后,可以在controller目录下新建TestController.java文件和WEB-INF/jsp/test.jsp,启动容器测试是否成功。二、DAO层代码完成与测试
这一章主要完成数据库底层的CRUD代码实现与测试工作。
1. MyBasits配置文件
见resources/MyBatis.xml.2. DAO层代码
首先编写实体类Employee 与 表tbl_emp相关操作代码。
EmployeeMapper.java主要接口有:int deleteOneById(@Param("empId") Integer empId); int updateOneById(@Param("empId") Integer empId, @Param("employee") Employee employee); int insertOne(Employee employee); Employee selectOneById(@Param("empId") Integer empId); Employee selectOneByName(@Param("empName") String empName); // 查询带有部门信息的Employee Employee selectWithDeptById(@Param("empId") Integer empId); // 分页查询 List<Employee> selectByLimitAndOffset(@Param("limit") Integer limit,@Param("offset") Integer offset); int countEmps();
具体实现参考EmployeeMapper.java与EmployeeMapper.xml中代码。
写完后需要对实现的代码进行测试,以验证代码的正确性。
测试用例代码见EmployeeMapperTest.java。类似地,
实体类Department与 表tbl_dept相关操作代码实现也如上类似,具体实现见DepartmentMapper.java 与 DepartmentMapper.xml,测试用例代码见DepartmentMapperTest.java。三、前端页面的搭建
前端页面实现的最终效果如下。
主页面:员工操作页面(部门操作页面类似):
(点击图片查看)最后加上一个登陆页面(比较简单的页面加上最简单的登录判断):
(点击图片查看)主要就是采用Bootstrap3去搭建这个前端页面,然后再利用SSM框架+JSP完成从前端到后端的整个流程。
下面首先Bootstrap3去搭建前端页面。1 主页面的静态搭建
主页面的HTML代码实现放在webapp/static/html/hrms_main.html,(此处仅仅为了方便查看和参考)。
整个主页面完成后,分别将其中公共部分的代码提取出来,如导航栏,左侧栏,尾部这3个部分都属于公共部分,
分别见hrms_head.html、hrms_foot.html、hrms_leftsidebar.html三个部分。2 公共页面的JSP实现及分层
下面将上述公共部分的HTML代码用JSP实现,详细见WEB-INF/jsp/commom目录下的head.jsp、foot.jsp、leftsidebar.jsp。
然后实现主页面的内容,主要包括三个公共部分(导航栏+左侧栏+尾部+轮播部分),实现效果如下:
(点击图片查看)新建main.jsp,将上述三个公共部分的代码用
<<%@ include file="./commom/xx.jsp"%>>
引入,再用Bootstrap实现轮播图部分即可,具体实现见main.jsp中代码。3 员工操作/部门操作的静态页面实现
员工操作页面与主页面3个公共部分相同,不同之处在于中间部分展示的是员工信息的表格显示,而主页面是一个轮播图。
(点击图片查看)下面就将实现employeePage的页面,详细代码见employeePage.jsp(即将main.jsp中的轮播部分换成员工表单显示部分即可)。
(为了方便对比与查看,将实现的HTML部分代码留在了项目目录中,
实现的HTML代码见WEB-INF/static/html/hrms_employee.html。
相应的部门显示的页面类似,
实现的HTML代码见WEB-INF/static/html/hrms_department.html。
然后将上述代码分别用JSP页面实现,即对应的employeePage.jsp和departmentPage.jsp。)四、员工CRUD操作前后端实现
1 员工信息查询的数据显示
页面搭建完成以后,就要将从后台获取到的数据展示在对应的页面中。页面数据展示部分主要实现是利用JSP的JSTL表达式和AJAX+jQuery,将从后台获取到的数据显示在页面对应的位置。
由于部门操作与员工操作类似,下面主要讲解员工显示页面的实现。
整个流程是从数据库中查询到数据后,放在SpringMVC的ModelAndView中,然后前端通过JSTL就可以解析获取到的结果集。
(1)首先写一个JSON相关的操作类:JsonMsg.java。
(2)业务操作:EmployeeService.java;
(3)Controller类:EmployeeController.java;
EmployeeController.java中接口"“emp/getEmpList?pageNo=XXX”"是根据输入的页码返回对应页数的数据,然后用JSTL表达式进行解析显示。@RequestMapping(value = "/getEmpList", method = RequestMethod.GET) public ModelAndView getEmp(@RequestParam(value = "pageNo", defaultValue = "1") Integer pageNo){ ModelAndView mv = new ModelAndView(""); int limit = 5; // 记录的偏移量(即从第offset行记录开始查询), // 如第1页是从第1行(offset=(21-1)*5=0,offset+1=0+1=1)开始查询; // 第2页从第6行(offset=(2-1)*5=5,offset+1=5+1=6)记录开始查询 int offset = (pageNo-1)*limit; //获取指定页数包含的员工信息 List<Employee> employees = employeeService.getEmpList(offset, limit); //获取总的记录数 int totalItems = employeeService.getEmpCount(); //获取总的页数 int temp = totalItems / limit; int totalPages = (totalItems % limit == 0) ? temp : temp+1; //当前页数 int curPage = pageNo; //将上述查询结果放到Model中,在JSP页面中可以进行展示 mv.addObject("employees", employees) .addObject("totalItems", totalItems) .addObject("totalPages", totalPages) .addObject("curPage", curPage); return mv; }
然后在employeePage.jsp页面上将后端的Modal中数据取出来进行显示。
主要代码有:<tbody> <c:forEach items="${employees}" var="emp"> <tr> <td>${emp.empId}</td> <td>${emp.empName}</td> <td>${emp.empEmail}</td> <td>${emp.gender == "M"? "女": "男"}</td> <td>${emp.department.deptName}</td> <td> <a href="#" role="button" class="btn btn-primary">编辑</a> <a href="#" role="button" class="btn btn-danger">删除</a> </td> </tr> </c:forEach> </tbody>
和
<div class="table_items"> 当前第<span class="badge">${curPage}</span>页,共有<span class="badge">${totalPage}</span>页,总记录数<span class="badge">${totalItems}</span>条。 </div>
(4)分页栏的代码实现。
分页栏完成效果如下:
(点击图片查看)关于分页栏需要完成的需求有:
- 当前页需要激活(主要是页面上的1,2,3,4,5页);
- 在首页(第1页)的时候,<< 禁止点击;
- 在末页(最后一页)的时候,>>禁止点击;
- 默认显示首页数据;
- 首页,上一页,末页,下一页添加事件,显示对应页码数据
- 中间页每一页,为其添加点击事件,并跳转到对应页面;
- 左边信息栏中当前第X页需要根据点击的页数同步显示。
主要的代码实现都是在前端使用jQuery+JSTL实现的。代码如下:
<div class="panel-body"> 此处代码略 </div>
以及对应的jQuery实现上一页、下一页的操作:
$(function () { //上一页 var curPage = ${curPage}; var totalPages = ${totalPages}; $(".prePage").click(function () { if (curPage > 1){ var pageNo = curPage-1; $(this).attr("href", "/emp/getEmpList?pageNo="+pageNo); } }); //下一页 $(".nextPage").click(function () { if (curPage < totalPages){ var pageNo = curPage+1; $(this).attr("href", "/emp/getEmpList?pageNo="+pageNo); } }); })
最后在主页面中的员工信息加上一个指定链接,跳转到当前员工信息显示的页面(部门操作类似,不再赘述),以及点击公司LOGO的时候跳转到主页面。
代码如下:
head.jsp:<script type="text/javascript"> //跳转到主页面 $("#company_logo").click(function () { $(this).attr("href", "/hrms/main"); });
leftsidebar.jsp:
<script type="text/javascript"> //跳转到员工页面 $(".emp_info").click(function () { $(this).attr("href", "/hrms/emp/getEmpList"); }); //跳转到部门页面 $(".dept_info").click(function () { $(this).attr("href", "/hrms/dept/getDeptList"); }); </script>
至此,员工信息的显示部分基本完成。
2 员工添加
接下来将会实现员工的新增操作,以及对新增数据的简单验证。
完成的页面效果如下:
(点击图片查看)主要完成的需求有:
- (1)点击左侧栏的员工新增按钮,弹出员工新增的模态框页面;
- (2)对输入的姓名和邮箱格式进行验证,格式不正确,提示错误信息;
- (4) 对输入的姓名进行姓名是否重复判断,重复则提示重复信息;
- (5)添加成功后跳转到添加记录所在的页面(即最后一页);
- (6)添加失败则提示错误信息。
后台代码实现主要有:
/** * 查询输入的员工姓名是否重复 * @param empName * @return */ @RequestMapping(value = "/checkEmpExists", method = RequestMethod.GET) @ResponseBody public JsonMsg checkEmpExists(@RequestParam("empName") String empName){ //对输入的姓名与邮箱格式进行验证 String regName = "(^[a-zA-Z0-9_-]{3,16}$)|(^[\\u2E80-\\u9FFF]{2,5})"; if(!empName.matches(regName)){ return JsonMsg.fail().addInfo("name_reg_error", "输入姓名为2-5位中文或6-16位英文和数字组合"); } Employee employee = employeeService.getEmpByName(empName); if (employee != null){ return JsonMsg.fail().addInfo("name_reg_error", "用户名重复"); }else { return JsonMsg.success(); } } /** * 新增记录后,查询最新的页数 * @return */ @RequestMapping(value = "/getTotalPages", method = RequestMethod.GET) @ResponseBody public JsonMsg getTotalPage(){ int totalItems = employeeService.getEmpCount(); //获取总的页数 int temp = totalItems / 5; int totalPages = (totalItems % 5 == 0) ? temp : temp+1; return JsonMsg.success().addInfo("totalPages", totalPages); } /** * 新增员工 * @param employee 新增的员工信息 * @return */ @RequestMapping(value = "/addEmp", method = RequestMethod.POST) @ResponseBody public JsonMsg addEmp(Employee employee){ int res = employeeService.addEmp(employee); if (res == 1){ return JsonMsg.success(); }else { return JsonMsg.fail(); } }
前端代码见employeeAdd.jsp。
主要是jQuey的操作,很多操作可以封装成一个函数进行调用,例如错误信息的显示。本文为了便于查看,没有进行封装。3 员工更改
员工修改操作完成页面如下:
(点击图片查看)更改主要完成的需求有:
- (1) 获取点击修改员工的id与name;
- (2) 根据id或name查询出对应员工信息进行回显;
- (3) 回显部门列表;
- (4) 进行修改,对修改的邮箱格式进行判断;
- (5) 点击更新按钮,发送AJAX请求到后台进行保存;
- (6)更改成功后跳转到当前更改页面。
后台代码实现主要有:
/** * 更改员工信息 * @param empId * @param employee * @return */ @RequestMapping(value ="/updateEmp/{empId}", method = RequestMethod.PUT) @ResponseBody public JsonMsg updateEmp(@PathVariable("empId") Integer empId, Employee employee){ int res = employeeService.updateEmpById(empId, employee); if (res != 1){ return JsonMsg.fail().addInfo("emp_update_error", "更改异常"); } return JsonMsg.success(); }
前端页面+jQuery代码见:employeeUpdate.jsp。
4 员工删除
员工删除操作完成页面如下:
(点击图片查看)删除主要完成的需求有:
- (1)弹出确认框:是否删除XX信息;
- (2)发送AJAX请求,执行删除操作;
- (3)删除成功后,跳转到当前页。
后台代码:
/** * 员工删除操作 * @param empId * @return */ @RequestMapping(value = "/deleteEmp/{empId}", method = RequestMethod.DELETE) @ResponseBody public JsonMsg deleteEmp(@PathVariable("empId") Integer empId){ int res = employeeService.deleteEmpById(empId); if (res != 1){ return JsonMsg.fail().addInfo("emp_del_error", "员工删除异常"); } return JsonMsg.success(); }
前端页面代码见employeePage.jsp:
<!-- ==========================员工删除操作=================================== --> $(".emp_delete_btn").click(function () { var curPage = ${curPage}; var delEmpId = $(this).parent().parent().find("td:eq(0)").text(); var delEmpName = $(this).parent().parent().find("td:eq(1)").text(); if (confirm("确认删除【" + delEmpName+ "】的信息吗?")){ $.ajax({ url:"/hrms/emp/deleteEmp/"+delEmpId, type:"DELETE", success:function (result) { if (result.code == 100){ alert("删除成功!"); window.location.href="/hrms/emp/getEmpList?pageNo="+curPage; }else { alert(result.extendInfo.emp_del_error); } } }); } });
至此,SSM项目的增删改查操作也基本完成,部门操作与上类似,本文不再赘述,感兴趣的可以略看Department相关操作的代码。
5 登录页面
最后,为求项目的完整性,加上一个登陆页面,实现的效果
图如下:
(点击图片查看)后台主要做了一个简单的登录验证,代码见LoginController.java:
/** * 登录:跳转到登录页面 * @return */ @RequestMapping(value = "/login", method = RequestMethod.GET) public String login(){ return "login"; } /** * 对登录页面输入的用户名和密码做简单的判断 * @param request * @return */ @RequestMapping(value = "/dologin", method = RequestMethod.POST) @ResponseBody public JsonMsg dologin(HttpServletRequest request){ String username = request.getParameter("username"); String password = request.getParameter("password"); System.out.println(username + password); if (!"admin1234".equals(username + password)){ return JsonMsg.fail().addInfo("login_error", "输入账号用户名与密码不匹配,请重新输入!"); } return JsonMsg.success(); } /** * 跳转到主页面 * @return */ @RequestMapping(value = "/main", method = RequestMethod.GET) public String main(){ return "main"; } /** * 退出登录:从主页面跳转到登录页面 * @return */ @RequestMapping(value = "/logout", method = RequestMethod.GET) public String logout(){ return "login"; }
前台页面见login.jsp代码;以及退出登录按钮的操作见head.jsp:
//账号退出 $(".hrms_logout").click(function () { window.location.href = "/hrms/logout"; });
注:
容器配置:五、项目代码下载
最后,将本次项目的代码上传到我的github当中,想要下载项目源码的话:戳这里。
如果觉得对你有帮助别忘了在我的github上随手点个star,THX!If any problem, contact me with QQ : 1032335358.(请注明来源于CSDN)
2018/03/09 in NJ.
【页面404 fix】 - fix in 2019/01/31
这段时间比较忙,很多同学的评论都没有来得及回复,很是抱歉。
看了下评论,基本上都是登录无反应 和 点击页面404的问题,404一般是绝对路径的问题,可以在代码中加上绝对路径就不会出错。
在配置容器的时候,只要点上如下配置,即可解决上述问题。 -
投资小的项目有哪些?投资小项目推荐
2019-06-23 12:00:22虽然说大家的生活水平提升了,但是压力却越来越大,每个月的工资根本无法支撑生活开支,所以说有些人毅然决然地选择辞职去创业选择寻找一些投资小项目进行投资。那么,投资小的项目有哪些呢? 投资小的项目有哪些?... -
分享一个我开发的MVVM架构的开源小项目
2019-03-01 07:56:31大家好,今天跟大家分享一个我编写的MVVM架构的开源小项目。话说这个小项目已经提前跟大家预热很久了,也是被不少朋友催了很多次。我之前在公众号里透漏过这个项目能够帮助大家更好地理解MVVM架构,当然我也希望确实... -
javase小项目
2017-05-07 09:43:16学习了一个月的javase后完成了一个小项目,教学管理系统。虽然是一个简单的小项目,但在完成期间,学到了许多内容。目前只用到了java基础部分的知识,后面的知识还没有学到,等学完后继续完善该项目。 首先该项目的... -
Android小项目集合100多个
2015-12-05 22:24:43是学习和联系Android小项目的使用资料 -
Golang练手小项目系列
2019-06-28 19:04:35Golang练手小项目系列 本系列整理了10个工作量和难度适中的Golang小项目,适合已经掌握Go语法的工程师进一步熟练语法和常用库的用法。 golang练手小项目系列(1)-位向量 golang练手小项目系列(2)-并发爬虫 golang练手... -
6.小项目.图片解码播放器
2016-12-16 16:01:10本课程是《朱有鹏老师嵌入式linux核心课程》第6部分,是一个课程后的小项目。用开发板本身自带的硬件完成一个基于linux API开发的图片解码播放器,实现了对BMP、JPG、PNG等格式图片进行解码播放的功能。 -
Python入门小项目
2016-07-05 23:08:37最近在学习Python,感觉光看书不够用,没法掌握Python。因此,在网上搜了一些Python练手小项目,进一步学习Python。 目前正在学习Wayne Shi提供的24个Python小项目。 点击打开链接 -
适合Java新手练手的小项目!
2018-10-08 15:40:00对于很多朋友来说,Java是学习编程的开始,也有很多朋友希望通过Java可以找到工作,...就需要一些小项目来练手,这里分享一些还不错供大家学习提高。 源码下载(实例一): jsp开发完整的博研图书馆后台管理系统... -
微信小程序开发小项目 天气预报开发实现
2018-10-10 14:35:57微信小程序开发小项目 天气预报开发实现 不求理解原理,只求熟悉使用 微信小程序项目,项目源码(github)。 在线体验: 打开微信搜索:T天气 扫描二维码: 效果图片: ... -
python小项目练习
2013-12-14 23:37:56python小项目练习 可以通过下面的一些小项目练习下,等打好基础我在做了. python项目练习一:即时标记python项目练习二:画幅好画python项目练习三:万能的XMLpython项目练习四:新闻聚合python项目练习五:... -
大三软件工程小项目-小技术集合总结
2017-03-08 21:45:25大三软件工程小项目-小技术集合总结 -
我的MVVM 开源小项目已发布~
2020-05-26 21:08:18那么这个开源小项目MvvmNews一定能帮助到你! 项目简介 本项目,使用了MVVM架构、JetPack组件 实现唯一功能即 通过网络请求获取新闻数据,点击item进入新闻详情页面,功能特别简单,但是 是学习MVVM的最佳方式。... -
51单片机综合小项目-第2季第4部分
2017-05-08 15:13:58本课程是《朱有鹏老师单片机完全学习系列课程》第2季第4个课程,也是51单片机学完之后的一个综合小项目,该项目运用了开发板上大多数外设设备,并将之结合起来实现了一个时间、温度显示以及报警功能、时间调整功能等... -
java 练手小项目
2018-03-29 20:45:28学习了javaSE的基础,为了巩固对Java面向对象编程,以及java多线程编程的理解,使用swing 写了一个很简单的小项目,源码github地址: https://github.com/pythondever/swing-demo 喜欢的同学可以学习学习 整体... -
django开发web小项目
2015-12-22 14:19:46django开发web小项目引言近期使用django开发了个小web项目,使用了bootstrap模板样式,以及echart图形控件,在这里对它们的基本使用做一些小总结.Whydjango是由python开发的开源网站框架,可以快速的搭建高性能的web站点... -
大三软件工程小项目-小技术集合-大纲
2017-03-02 18:27:19大三软件工程小项目-小技术集合-大纲 -
适合初学者练手的vue小项目(附github源码)
2019-01-22 10:04:00vue慢慢的成为了前端最受欢迎的框架之一,在很多项目之中开发都能用得到,...如果在平时的工作里,有些公司用不到这两项技能,那你也要在业余的时间里面,找一些教程和练手的vue小项目。以下是今年的一些可以练笔的... -
python数据分析小项目练习
2019-04-12 19:28:01python数据分析小项目练习 在敲代码中领悟 转自:大神原文链接 import numpy as np import pandas as pd import matplotlib.pyplot as plt plt.rcParams['font.sans-serif']=['SimHei'] #用来正常显示中文标签... -
我写了一个Python小项目
2019-09-25 14:52:59最近我写了一个 Python 练手小项目,它是一个 PC 桌面版的便签程序,很简陋。写这个小项目是为了熟悉一下用Python 进行一个完整的项目开发,进一步熟练 Python 的使用。 界面是这样的: 这个小项目所用到的... -
Unity 小项目:模拟太阳系
2017-03-12 16:06:16Unity 小项目:模拟太阳系 太阳系是以太阳为中心,和所有受到太阳的引力约束天体的集合体。包括八大行星(由离太阳从近到远的顺序:水星、金星、地球、火星、木星、土星、天王星、海王星 )、以及至少173颗... -
使用smrty的php小项目_我来开源一个学习类的小程序
2021-01-14 01:09:26暑假做的学习类小程序开源 最近开源了一个学习类的小程序 前端用的是微信小程序,用了colorUI组件,wemark来渲染markdown语法 后端用的是python的flask框架,使用sqlalchemy框架对数据库进行CRUD 这个小项目是我2020... -
QT练手小项目一
2018-11-07 21:56:12最近在做MFC方面的工作,但是觉得QT不能够扔下,所以空闲的时候做一些QT方面的练手小项目,就当复习了。代码量很小,易于理解。我会把整个代码放在博客最后面。 我们先来看一看整个页面,整个页面是比较简单的... -
小项目实用makefile
2012-12-23 20:52:10本文,主要总结一下小项目中的一种实用makefile写法,为个人项目或小型项目makefile提供参考。 1. 单个源码文件的makefile 常规的教程,或网上资料,都会以单个源码文件的makefile为示例,讲解makefile的... -
用idea运行springboot的小项目
2019-04-22 17:02:512 数据库建立完成,然后创建一个小的springboot小项目。 在上图中点击web,然后创建完成。 3 在项目中进行数据库的连接: 点击项目中的resources的application.propertties; spring.datasource.url=jdbc:mysql:... -
大三软件工程小项目-小技术集合-socket环境搭建
2017-03-06 22:29:48大三软件工程小项目-小技术集合-socket环境搭建 -
怎么用pycharm搭建flask小项目
2018-06-03 20:36:19怎么用pycharm搭建flask小项目(借鉴别人的项目,也提出一些自己的经验,和师父的帮助,才慢慢调试出来的)1、pycharm下载:首先下载的pycharm必须是professional版本而不是community版本,professional版本必须得有...