前言：

 在公司学习了一段时间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的应用；



收藏夹：列举曾收藏过的所有新闻；

 

----------华丽分割线----------

 

至此，项目介绍完毕。

 

记得刚学python那会，作过一个飞机大战小项目，这个项目非常经典，可以帮助初学者提高动手能力，今天把它分享出来
一、项目介绍
二、项目实现
１.安装库
２.主要python代码
三、说明：
四、完整版代码及数据 下载地址（下载就能用）

一、项目介绍
先放几张图片








二、项目实现
１.安装库
pip install pygame

２.主要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有一段时间了，都是处于那种三天打鱼，两天晒网的状态，没有效率，因为方法不对，一直是在看资料，看视频，并没有实际上手项目，就算当时看了，记住了，最后还是不会用，或者说要到用的时候不会用。这样学下去，根本没有任何效果，反思反思再反思，为什么有的人一个星期就能理解个大概了，因为他一直玩代码啊~~~

好吧，这样就开始了自己的第一个小项目，坚持下来，会发现自己每天过得好充实，开始的时候是找了一个飞机游戏，跟着视频敲代码，虽然第一遍不懂，那就再来一遍，两遍不懂，那就来三遍，一遍一遍的理清逻辑，搞清楚方法之间的调用关系。记得有人跟我说过，招聘要求有几年经验，并不是说真正的非得工作那么几年，而是有那么几年的代码量。

总之，勤能补拙。

下面是我的小游戏最终实现的效果



有点丑，因为没有图片处理技术，慢慢来吧。然后说说这个项目中遇到的问题。

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：存活计时

开始和死亡的时间计数，然后做差

 

前言
相信很多小伙伴在学习完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一般是绝对路径的问题，可以在代码中加上绝对路径就不会出错。

在配置容器的时候，只要点上如下配置，即可解决上述问题。