• vuecli项目实战--管理系统

    一、项目搭建

    HBuider直接：新建--项目--填项目名称、选地址、下拉选vue项目（2.6.10）

    项目结构这个样子：

     

    二、前端配置

    1.路由配置（地址）

    在src文件夹下创建router文件夹 在router文件夹下面创建js文件 index.js---配置组件的地址 还有导航守卫、路由嵌套也配在这里

    1.组件路由

    2.组件路由嵌套

    3.路由导航

    记得跟vue对象关联还有导出路由嗷

    1. import Vue from 'vue'; /* 导入vue */
    2. import router from 'vue-router'; /* 导入路由组件  实现组件切换功能  */
    3. /* 导入自己要用的组件 */
    4. import Login from "../views/Login.vue";
    5. import Main from "../views/Main.vue";
    6. import Logon from "../views/Logon.vue";
    7. ​
    8. import Teacher from "../views/teacher/TeacherList.vue";
    9. import Student from "../views/student/StudentList.vue";/* 后面是地址  前面名字可以自定义 */
    10.  
    11. Vue.use(router) /*  vue对象跟ruoter关联 */
    12. ​
    13. /* 定义组件  主要是为他提供地址*/
    14. var rout = new router({
    15.     routes: [ /* 可以定义多组数据 */ 
    16.     {
    17.             path: '/login',
    18.             /* 给组件配置的地址 */
    19.             name: 'Login',
    20.             /* 可以不写  */
    21.             component: Login,
    22.             /* 指定跟哪个组件对应 */
    23. ​
    24.         },
    25.         {
    26.             path: '/main',
    27.             name: 'Main',
    28.             component: Main,
    29.             children: [ /* 路由嵌套*/
    30.                 {
    31.                     path: '/teacher',
    32.                     name: 'Teacher',
    33.                     component: Teacher,
    34.                 },
    35.                 {
    36.                     path: '/student',
    37.                     name: 'Student',
    38.                     component: Student,
    39.                 }
    40.             ]
    41.         },
    42.         {
    43.             path: '/logon',
    44.             name: 'Logon',
    45.             component: Logon,
    46.         },
    47.         
    48.     ]
    49. });
    50. ​
    51. ​
    52. //路由导航守卫   一旦发生路由跳转就会发生此函数
    53. rout.beforeEach((to, from, next) => {//to，from表示从哪来  到哪去  next放行  是她要跳转的地址 验证通过就可以跳转过去  不通过直接跳转回login界面
    54.     if (to.path == '/login') { //如果用户访问的登录页，直接放行 
    55.         return next();
    56.     } 
    57.     else if(to.path=='/logon'){
    58.         return next();
    59.     }else{
    60.         var account = window.sessionStorage.getItem("account");//用账号查  账号不可能为空
    61.         if (account == null) {//账号为空   表明没有登录  让他去登录界面
    62.             return next("/login");
    63.         } else {
    64.             next();
    65.         }
    66.     }
    67. })
    68. ​
    69. ​
    70. //导出路由对象
    71. export default rout;
    72. ​

    2.全局配置

    要用的ElementUI组件 还有网络请求库axios 下载和配置 还有刚才的路由也要配置进来 还有响应拦截器

    1.下载ElementUI组件、网络请求库axios：

    在终端输入：npm i element-ui -s 下载ElementUI

    在终端输入：npm install axios 下载axios

    2.配置全局路径：

    1. Vue.config.productionTip = false;//设置不打印生产模式
    2. import Vue from 'vue';//导入vue.js
    3. import App from './App.vue';//导入当前目录下的App组件
    4. ​
    5. ​
    6. /* 导入路由功能  */
    7. import router from "./router/index.js"
    8. Vue.use(router);
    9. ​
    10. /* 导入ElementUI */
    11. import ElementUI from 'element-ui';
    12. import "element-ui/lib/theme-chalk/index.css";
    13. Vue.use(ElementUI);
    14. ​
    15. ​
    16.   
    17. //导入网络请求库axios
    18. import axios from "axios"
    19. axios.defaults.baseURL="http://localhost:8088/webBack/";//定义后端地址  发送请求的时候就只发送后面的就可以  
    20. Vue.prototype.$http = axios;//将axios绑定到Vue对象中  直接this就可以用vue对象
    21. axios.defaults.withCredentials = true;//身份认证  这样请求向后端发的时候就会将id放在请求头中一起发 自动发
    22. /* axios怎么用：   直接this.$http.get或post请求 */
    23. ​
    24. ​
    25. //添加响应拦截器
    26. /* 后端要是响应500  就被拦截器拦截下来  然后提示系统忙 */
    27. axios.interceptors.response.use((resp)=>{
    28.     if(resp.data==201){
    29.         router.replace("/login");/* 通过上面的路由对象  直接路由跳转 */
    30.     }
    31.     if(resp.data==500){
    32.         ElementUI.Message({message: '系统忙，请稍后再试',type: 'warning'});
    33.     }
    34.     
    35. return resp;
    36. },(error)=>{/* 发送请求失败   发都没发出去*/
    37.     
    38.     ElementUI.Message({message: '请求地址有误',type: 'error'});
    39.     return Promise.reject(error);
    40.     
    41. }
    42. ); 
    43. ​
    44. ​
    45. ​
    46. ​
    47. ​
    48.  
    49. new Vue({
    50.   render: h => h(App),
    51.   
    52.   router,
    53.   
    54.   
    55. }).$mount('#app');//把Vue对象跟id为app的绑定起来 
    56. /*即：创建一个Vue对象，并把App组件注册进去  把app标签与Vue对象绑定*/

    3.显示组件

    在src文件夹下面的App.vue里面 加上<router-view></router-view>让组件显示出来

    1. <template>
    2.   <div id="app">
    3. <router-view></router-view><!-- 让组件显示出来 -->
    4. ​
    5.   </div>
    6. </template>
    7. ​
    8. <script>
    9. ​
    10. export default {
    11.   
    12. }//导出
    13. </script>
    14. ​
    15. <style>
    16. ​
    17. </style>
    18. ​
    19. ​
    20. <!-- App就是一张画布 -->

    三、前端发送异步请求

    1.get：通过id查找学生 把id传进去 resp接收返回的数据

    1. this.$http.get("student?mark=findStudentID&id="+id).then((resp) => {
    2.     then回调的数据resp.date.点出来就可以了 不返回数据的then可以不写
    3.     比如this.form.num=resp.data.num;拿到后端传回来的num赋给from表单的num
    4.     
    5.     
    6.                 });  
    只是发送请求  没有回调  mark是为了处理doget请求的时候好分辨  因为可能有很多请求发送get请求
​

    this.$http.get("student?mark=delete");

    2.post：直接用jsonToString(this.form))方法把表单信息都发送过去

    1. this.$http.post("back/student?mark=save",jsonToString(this.form)).then((resp) => {
    2.                 //发post请求  将表单发过去
    3.                 if(resp.data==200){
    4.                     this.$message({message: '保存成功',type: 'warning'});
    5.                     this.dialogVisible=false;//把页面关掉
    6.                     this.$router.go();//更新界面
    7.                 }
    8.             });

    四、后端项目搭建

    创建java项目 添加web依赖

    项目名 右键 Add Rramework Support...

     

    勾选 Web Application（4.0）

     

    打开工具栏：点viwe ---点Appearance ---点Toolbar

     

    五、后端配置

    1.配置服务器：

     

    点工具栏中Add Configurations 点+号

     

    下拉找到Tomcat Server 点进去 点Local

     

    上面的配置好了 点Deployment 把项目部署到服务器

    +号 Artifact

     

     

    ok 再返回Server过去 应用 ok就好了

    2.导包

    在WEB-INF文件夹下面创建bli文件夹 在里面导包 记得添加依赖（点包 右键 下拉）

     

    gson是格式的 myspl连接数据库的 servlet服务器的

    2.Servlet配置

    两种方法

    1.在web.xml里面配置 servlet在里面配置 过滤器也在里面配置

    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    3.          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    4.          xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
    5.          version="4.0">
    6.     <!--xml 可扩展标记语言  主要用于记录数据  有一定规则
    7.     web.xml:是web项目的配置文件，此文件在服务器启动是，由服务器读取  加载里面的配置（servlet、过滤器、监听器...）
    8.     -->
    9. ​
    10.     <!--配置注册servlet-->
    11.     <servlet>
    12.         <servlet-name>login</servlet-name>
    13.         <servlet-class>com.ffyc.webback.servlet.LoginServlet</servlet-class>
    14. ​
    15.     </servlet>
    16.     
    17.     <!--为servlet配置地址-->
    18.     <servlet-mapping>
    19.         <servlet-name>login</servlet-name>
    20.         <url-pattern>/login</url-pattern>
    21.     </servlet-mapping>
    22. ​
    23. ​
    24.     <!--配置跨域过滤器-->
    25.    <filter>
    26.        <filter-name>crossFilter</filter-name>
    27.        <filter-class>com.ffyc.webback.filter.CorsFilter</filter-class>
    28.    </filter>
    29.     <!--配置哪些请求进入到过滤器中-->
    30.     <filter-mapping>
    31.         <filter-name>crossFilter</filter-name>
    32.         <url-pattern>/*</url-pattern><!--所有都要进入到过滤器-->
    33.     </filter-mapping>
    34. ​
    35. ​
    36.     <!--配置编码过滤器-->
    37.     <filter>
    38.         <filter-name>encodFilter</filter-name>
    39.         <filter-class>com.ffyc.webback.filter.EncodFilter</filter-class>
    40.     </filter>
    41.     <filter-mapping>
    42.         <filter-name>encodFilter</filter-name>
    43.         <url-pattern>/*</url-pattern>
    44.     </filter-mapping>
    45. ​
    46.     <!--配置后端登录验证过滤器-->
    47.     <filter>
    48.         <filter-name>isloginFilter</filter-name>
    49.         <filter-class>com.ffyc.webback.filter.IsLoginFilter</filter-class>
    50.     </filter>
    51.     <filter-mapping>
    52.         <filter-name>isloginFilter</filter-name>
    53.         <url-pattern>/back/*</url-pattern><!--除了登录不用过滤  其他都要  路径上做文章  登录的路径是/login  其他路径可以前面都
    54.         加一个back  比如测试的 /back/test-->
    55.     </filter-mapping>
    56. </web-app>

    2.直接在servlet注解配置

    @WebServlet(name=" 访问 "，urlPatters=" 地址名 ")

     

    六、后端接收请求、处理

    创建个servlet文件夹 把用到的各种servlet放在里面 、创建一个dao文件夹 连接数据库处理的到就放在里面

    servlet接收前端传过来的请求 根据mark判断调哪个方法 根据请求的具体又调用dao类里面处理哪些数据的方法 dao里面的方法是跟数据库对接的

    比如查询学生列表

    1.判断mark调用哪个方法

     

    2.调方法（该方法还是在servlet里面的）

    3.调dao里面的方法 与数据库连接

    1.    //查询学生列表的dao操作
    2.     public List<Student>  findList (String num,String name) throws ClassNotFoundException, SQLException {
    3. ​
    4.         Connection connection=null;
    5.         PreparedStatement ps=null;
    6.         ResultSet rs=null;
    7.         ArrayList<Student> students=new ArrayList<>();//对象储存信息  最后将这个对象返回回去
    8.         try {
    9.             Class.forName("com.mysql.cj.jdbc.Driver");
    10.             connection = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/webdb?serverTimezone=Asia/Shanghai", "root", "root");
    11. ​
    12.             String spl="\n" +
    13.                     "SELECT \n" +
    14.                     "s.id,\n" +
    15.                     "s.num,\n" +
    16.                     "s.name sname,\n" +
    17.                     "s.gender,\n" +
    18.                     "s.phone,\n" +
    19.                     "g.name gname,\n" +
    20.                     "a.account,\n" +
    21.                     "s.oper_time\n" +
    22.                     "FROM student s LEFT JOIN grade g ON s.gradeid=g.id \n" +
    23.                     "                        LEFT JOIN admin a ON s.adminid=a.id "+
    24.                     "where 1=1";
    25. /*1=1就不用考虑先后问题了*/
    26.             if (num != null && num != ""){
    27.                 spl+=" and s.num="+num;
    28.             }
    29.             if (name != null && name != ""){
    30.                 spl+=" and s.name='"+name+"'";
    31.             }
    32.             ps=connection.prepareStatement(spl);
    33. ​
    34.             
    35.             rs=ps.executeQuery();//将查询结果封装到rs中 可能多条数据  while循环
    36.             while (rs.next()){
    37.                Student student=new Student();//每循环一次  就new一个对象
    38.                 student.setId(rs.getInt("id"));/*以别名为准*/
    39.                 student.setNum(rs.getInt("num"));
    40.                 student.setName(rs.getString("sname"));
    41.                 student.setGender(rs.getString("gender"));
    42.                 student.setPhone(rs.getString("phone"));
    43.                 student.setGradeName(rs.getString("gname"));
    44.                 student.setAccount(rs.getString("account"));
    45.                 student.setOperTime(rs.getTimestamp("oper_time"));
    46.                 students.add(student);
    47. ​
    48.             }
    49.         }finally {
    50.             if (ps!=null){
    51.                 ps.close();
    52.             }
    53.             if (rs!=null){
    54.                 rs.close();
    55.             }
    56.             if (connection!=null){
    57.                 connection.close();
    58.             }
    59. ​
    60.         }
    61.         return students;//这里的admin=null
    62.     }
    63. ​
    64.  

    七、前端接收后端的响应

    1、基操

    1.拿到返回的对象：resp.data拿到返回来的对象 信息都封装在里面 点就可以拿到了

    比如resp.data.id拿到返回来的id

    2.日期有格式问题 拿到后要格式化

    (resp.data.birthday).toLocaleString();//格式化生日

    3.登录成功后可以把拿到的信息放到浏览器里面 就可以显示出来 如显示账号头像昵称

    window.sessionStorage.setItem("account",resp.data.account);

    然后要显示的话：在要显示的vue界面 的导出里面 把数据放到data的return里面

     

    想在哪里显示就{{account}} 即可

    2.路由嵌套--在一个组件里打开另一个组件 即子组件

    如在Main.vue组件里打开学生列表组件

    1.在Main组件的路由里 加一个子组件children 地址path

     

    2.打开子组件：设置index="刚设置的子组件的地址path" 点击学生管理就会显示出学生列表组件

     

    让组件显示出来 在要显示的区域加<router-view></router-view>

     

    3.在学生列表组件里面再打开添加学生组件

    直接在添加学生组件里面 导入组件 注册 显示

    1.导入组件

    2.注册组件

    3.显示组件

     

    八、数据库的增删改查

    1.增 新增学生信息

    1.  public void save(String num, String name, String gender, String birthday, String phone, String gradeId,int id) throws SQLException, ClassNotFoundException {
    2. ​
    3.         Connection connection=null;
    4.         PreparedStatement ps=null;
    5. ​
    6.         try {
    7.             Class.forName("com.mysql.cj.jdbc.Driver");
    8.             connection = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/webdb?serverTimezone=Asia/Shanghai", "root", "root");//连接数据库
    9.             ps=connection.prepareStatement("" +
    10.                     "insert into student(num,name,gender,birthday,phone,gradeId,adminid,oper_time)"+
    11.                     "value(?,?,?,?,?,?,?,?)");
    12.             ps.setObject(1,num);
    13.             ps.setObject(2,name);
    14.             ps.setObject(3,gender);
    15.             ps.setObject(4,birthday);
    16.             ps.setObject(5,phone);
    17.             ps.setObject(6,gradeId);
    18.             ps.setObject(7,id);
    19.             ps.setObject(8,new java.util.Date());
    20. ​
    21.           ps.executeUpdate();//执行spl语句
    22. ​
    23.         } finally {
    24.                 ps.close();
    25.                 connection.close();
    26.             }
    27. ​
    28.         }

    2.删 删除学生信息

    1. public void deleteStudentById(String id) throws ClassNotFoundException, SQLException {
    2.     
    3.         Connection connection=null;
    4.         PreparedStatement ps=null;
    5. ​
    6.         try {
    7.             Class.forName("com.mysql.cj.jdbc.Driver");
    8.             connection = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/webdb?serverTimezone=Asia/Shanghai", "root", "root");
    9.             ps=connection.prepareStatement("" +
    10.                     "delete from student where id=?");
    11.             ps.setObject(1,id);
    12. ​
    13.             ps.executeUpdate();//执行sql语句
    14. ​
    15.         } finally {
    16.             
    17.                 ps.close();
    18.                 connection.close();
    19.             }
    20. ​
    21.         }

    3.改 修改学生信息

    就是把数据库中的信息按表中的信息修改

    1.  public void update(String id, String name, String gender, String birthday, String phone, String gradeId, int adminid) throws ClassNotFoundException, SQLException {
    2.     //修改学生信息
    3.         Connection connection=null;
    4.         PreparedStatement ps=null;
    5. ​
    6.         try {
    7.             Class.forName("com.mysql.cj.jdbc.Driver");
    8.             connection = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/webdb?serverTimezone=Asia/Shanghai", "root", "root");
    9.             ps=connection.prepareStatement("" +
    10.                     "update student set name=?,gender=?,birthday=?,phone=?,gradeid=?,adminid=?,oper_time=?"+
    11.                     "where id=?");
    12.             ps.setObject(1,name);
    13.             ps.setObject(2,gender);
    14.             ps.setObject(3,birthday);
    15.             ps.setObject(4,phone);
    16.             ps.setObject(5,gradeId);
    17.             ps.setObject(6,adminid);
    18.             ps.setObject(7,new java.util.Date());
    19.             ps.setObject(8,id);//学生id
    20. ​
    21.             ps.executeUpdate();
    22. ​
    23.         } finally {
    24.             
    25.                 ps.close();
    26.                 connection.close();
    27.             }
    28. ​
    29.         }

    4.查 查询学生信息

    1. public Student findStudentById(String id) throws ClassNotFoundException, SQLException {
    2.     
    3.         Connection connection=null;
    4.         PreparedStatement ps=null;
    5.         ResultSet rs=null;
    6.         Student student=new Student();
    7.         try {
    8.             Class.forName("com.mysql.cj.jdbc.Driver");
    9.             connection = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/webdb?serverTimezone=Asia/Shanghai", "root", "root");
    10.             ps=connection.prepareStatement("select s.id,s.num,s.name,s.gender,s.phone,s.gradeid,s.birthday from student s where id=?");
    11.            ps.setObject(1,id);
    12.             rs=ps.executeQuery();//将查询结果封装到rs中 可能多条数据  while循环
    13.             while (rs.next()){
    14. //把信息封装在学生对象  把学生对象返回去
    15.                 student.setId(rs.getInt("id"));
    16.                 student.setNum(rs.getInt("num"));
    17.                 student.setName(rs.getString("name"));
    18.                 student.setGender(rs.getString("gender"));
    19.                 student.setPhone(rs.getString("phone"));
    20.             student.setBirthday(rs.getTimestamp("birthday"));
    21.                 student.setGradeid(rs.getInt("gradeid"));
    22.             }
    23.         }finally {
    24.           
    25.                 ps.close();
    26.                 rs.close();
    27.                 connection.close();
    28.             }
    29.             return student;//封装好了就返回回去  别写下一个括号外面  就会返回null
    30.         }
    31. ​
    32.     }

    九、管理系统效果

    1.登录

     

    2.注册

     

    3.主界面

     

    4.新增

     

    5.查询

     

    6.修改

     

    7.删除

     

  • 相关阅读:
    AIGC（生成式AI）试用 7 -- 桌面小程序
    SpringBoot动态切换数据源
    序设计·RB(AT&T汇编)_笔记_第10章：处理字符串
    环形链表的判断思路
    鸿蒙DevEco Studio 4.1 Release-模拟器启动方式错误
    1230. K倍区间(前缀和)
    91.（leaflet篇）leaflet态势标绘-进攻方向绘制
    教师教学质量评价管理系统（ASP.net+SqlServer）
    iOS swift5 提示信息显示，提示弹框，第三方框架XHToastSwift
    北京汽车美容元宇宙，未来已来
  • 原文地址：https://blog.csdn.net/qq_56047419/article/details/125528492