devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前后端交互(小白教学)

作者：IT小白 | 2024-02-19 14:14:34

赞

踩

前后端交互

  • 在我们的印象中什么是前后端交互呢?

  • 我们一个后端程序员为什么要去学习前端知识?

  • 前后端交互到底是靠什么而进行关联的呢?

接下来我们带着这三个问题来阅读这边文章!!!

1.前后端交互

所谓前后端交互,即前后端交互为前端和后端的互动,也可以理解为数据交互,前端需要获取(GET)的数据获取上传(POST)的数据,要通过请求来完成的,前端发送请求,后端接收到请求后,便对数据库进行操作,返回前端所需要的数据,即完成一次前后的交互.具体流程看上图

在公司中不仅有后端工程师,还有前端工程师,后端人员学习前端的知识是为了更好的和前端工程师进行业务交流以及逻辑合同.

2.在HTML中创建项目

我们在普通项目中选择vue项目(2.6.10)进行项目创建(脚手架)

1.安装项目中所需要的组件

  • npm i vue-router@3.5.3 //路由管理器组件

  1. 1. 创建 router 目录js
  2. 创建 index.js 文件,在其中配置路由
  3. import Vue from 'vue';
  4. import router from 'vue-router';
  5. /* 导入路由 */
  6. import login from '../views/login';
  7. /* 导入其他组件 */
  8. import content from '../components/content';
  9. /* 导入其他组件 */
  10. Vue.use(router)
  11. /* 定义组件路由 */
  12. var rout = new router({
  13. routes: [
  14. {
  15. path: '/index',
  16. name: 'index',
  17. component: index
  18. },
  19. {
  20. path: '/content',
  21. component: content
  22. }
  23. ]
  24. });
  25. //导出路由对象
  26. export default rout;

  • npm i element-ui -S //桌面端组件库

  1. 在 main.js 中写入以下内容：
  2. import ElementUI from 'element-ui';
  3. import 'element-ui/lib/theme-chalk/index.css';
  4. Vue.use(ElementUI);
  5. new Vue({
  6. render: h => h(App),
  7. }).$mount('#app');
  •  npm install axios    //HTTP网络端的的请求库 
    1. 在 main.js 中配置 axios
    2. 导入 axios
    3. import axios from 'axios';
    4. 设置访问后台服务器地址
    5. axios.defaults.baseURL="http://127.0.0.1:9999/api/";
    6. 将 axios 挂载到 vue 全局对象中,使用 this 可以直接访问
    7. Vue.prototype.$http=axios;

2.配置文件

我们在项目中创建出我们所需要的vue文件,vue文件一定要在index.js中进行组件导入,并且设置该组件的路由进行访问

在app.vue中一定要<router-view></router-view>来显示不同的组件

3.网页的跳转

点击楼栋管理和宿舍员管理组件怎么样使得该网页在main中进行渲染呢?

  • 第一步:在项目中创建2个目录,然后再对应的目录中创建对应的vue文件,然后在index.js中进行组件导入(导入的方法上面已经说过了,在这里就不多加解释了)

  • 第二步:配置路由,这里的话,还是比较容易出错的，children是子组件的路由定义,在父组件的括号里进行定义

  • 在main中找到对应的标签进行路由设置

  • 在表单中添加一个router

  

  • 在main中添加一个<router-view></router-view>组件

4.弹窗组件的设置

  • 在对应的目录中创建一个关于弹窗组件的Vue,然后在element中找到弹窗组件

    dialogFormVisible=true时,弹窗显示 dialogFormVisible=false时,弹窗不显示

  • 在主组件中导入

  • 放置组件

  • 创建一个方法,使得点击后dialogFormVisible=true

3.在后端创建项目

1.创建一个idea项目

2.部署服务器

  • 点击Web Application,点击OK

 

  • 点击这个,进行服务器的部署

  • 点击第一个Tomcat Server

  • 点击bin紧挨着的tomcat

  • 在Deployment中进行服务器部署,在点击最底下Apply进行应用

  • 布置好以后就会出现一个小狗的标记

3.导入库

  • 在WEB-INF中创建一个lib文件,导入所需要的包,选中鼠标右键有一个Add Library添加到库

4.配置 Servlet,filter

  1. //配置一个Servlet和filter就要在Web-xml中配置
  2. <servlet>
  3.         <servlet-name>名字</servlet-name>
  4.         <servlet-class>文件路径</servlet-class>
  5.     </servlet>
  6.     <servlet-mapping>
  7.         <servlet-name>名字(和上面的名字一致)</servlet-name>
  8.         <url-pattern>/域名</url-pattern>//一定要/开头,不然项目启动不了
  9.     </servlet-mapping>
  10. ​
  11. ​
  12.    <filter>
  13.         <filter-name>名字</filter-name>
  14.         <filter-class>文件路径</filter-class>
  15.     </filter>
  16.     <filter-mapping>
  17.         <filter-name>名字(和上面的名字一致)</filter-name>
  18.         <url-pattern>/*</url-pattern>//过滤的类型
  19.     </filter-mapping>

5.跨域过滤器 token过滤器

  1. //跨域过滤器  官方提供
  2. ​
  3. //@WebFilter(urlPatterns = "/*")
  4. public class CorsFilter implements Filter {//解决跨域问题的过滤器
  5.     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
  6.             throws IOException, ServletException {
  7.         HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
  8.         HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;
  9.         //允许携带Cookie时不能设置为* 否则前端报错
  10.         httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//允许所有请求跨域
  11.         httpResponse.setHeader("Access-Control-Allow-Methods", "*");//允许跨域的请求方法GET, POST, HEAD 等
  12.         httpResponse.setHeader("Access-Control-Allow-Headers", "*");//允许跨域的请求头
  13.         httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//是否携带cookie
  14. ​
  15.         filterChain.doFilter(servletRequest, servletResponse);
  16.     }
  17. }
  18. ​
  1. //token过滤器  官方提供
  2. ​
  3. package feifan.com.util;
  4. ​
  5. ​
  6. import com.auth0.jwt.JWT;
  7. import com.auth0.jwt.JWTVerifier;
  8. import com.auth0.jwt.algorithms.Algorithm;
  9. import com.auth0.jwt.interfaces.DecodedJWT;
  10. ​
  11. import java.util.Date;
  12. import java.util.HashMap;
  13. import java.util.Map;
  14. ​
  15. public class JWTUtil {
  16. ​
  17.     /**
  18.      * jwt 生成 token
  19.      *
  20.      * @param id
  21.      * @param account * @return
  22.      */
  23.     public static String token(Integer id, String account) {
  24.         String token = "";
  25.         try {
  26.             //过期时间 为 1970.1.1 0:0:0 至 过期时间 当前的毫秒值 + 有效时间
  27.             Date expireDate = new Date(new Date().getTime() + 60 * 60 * 24 * 1000);//过期时间
  28.             //秘钥及加密算法  加盐
  29.             Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");
  30.             //设置头部信息
  31.             Map<String, Object> header = new HashMap<>();
  32.             header.put("typ", "JWT");//生成的类型
  33.             header.put("alg", "HS256");//加密算法
  34.             //携带 id，账号信息，生成签名
  35.             token = JWT.create()
  36.                     .withHeader(header)//头部
  37.                     .withClaim("id", id)//用户id
  38.                     .withClaim("account", account)//用户账号
  39.                     .withExpiresAt(expireDate)
  40.                     .sign(algorithm);
  41.         } catch (Exception e) {
  42.             e.printStackTrace();
  43.             return null;
  44.         }
  45.         return token;
  46.     }
  47. ​
  48.     public static boolean verify(String token) {
  49.         try {
  50.             //验签
  51.             Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");
  52.             JWTVerifier verifier = JWT.require(algorithm).build();
  53.             DecodedJWT jwt = verifier.verify(token);
  54.             return true;
  55.         } catch (Exception e) {//当传过来的 token 如果有问题,抛出异常
  56.             return false;
  57.         }
  58.     }
  59. ​
  60.     /**
  61.      * 获得 token 中 playload 部分数据,按需使用
  62.      *
  63.      * @param token
  64.      * @return
  65.      */
  66.     public static DecodedJWT getTokenInfo(String token) {
  67.         return JWT.require(Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE")).build().verify(token);
  68.     }
  69. }

4.一个比较完整项目的代码

项目的重点不是代码,而是思路,代码千篇一律,有一个清晰的思路才是最重要的,一起加油哦

前端代码

  1. //Add.vue
  2. <template>
  3.     <el-dialog title="新增专业" :visible.sync="dialogFormVisible">
  4.         <el-form :model="form">
  5.             <el-form-item label="专业名称">
  6.                 <el-input v-model="form.name" autocomplete="off"></el-input>
  7.             </el-form-item>
  8.         </el-form>
  9.         <div slot="footer" class="dialog-footer">
  10.             <el-button @click="dialogFormVisible = false">取 消</el-button>
  11.             <el-button type="primary" @click="dialogFormVisible =upAddCourseForm()">保存</el-button>
  12.         </div>
  13.     </el-dialog>
  14. </template>
  15. <script>
  16.     export default {
  17.         data() {
  18.             return {
  19.                 dialogFormVisible: false,
  20.                 form: {
  21.                     name: "",
  22.                     mark:"save"
  23.                 }
  24.             }
  25.         },
  26.         methods:{
  27.             upAddCourseForm(){
  28.                 this.$http.post("admin/course",jsonToString(this.form)).then((resp)=>{
  29.                     if(resp.data.data==true){
  30.                          this.$message({
  31.                                   message:resp.data.message,
  32.                                   type: 'success'
  33.                                 });
  34.                                 this.$router.go();
  35.                     }
  36.                 })  
  37.             }   
  38.         },
  39.         mounted(){
  40.         }
  41.         }
  42.         function jsonToString(jsonobj){
  43.                            console.log(jsonobj)
  44.                            var str = "";
  45.                            for(var s in jsonobj){
  46.                                 str+=s+"="+jsonobj[s]+"&";    
  47.                            }
  48.                            return str.substring(0,str.length-1);}
  49. </script>
  50. <style>
  51. </style>
  1. //course.vue
  2. ​
  3. <template>
  4.     <el-card class="box-card" style="text-align: left;">
  5.         <el-row :gutter="20">
  6.             <el-col :span="6">
  7.                 <el-input placeholder="专业"></el-input>
  8.             </el-col>
  9.             <el-col :span="6">
  10.                 <el-button type="primary" icon="el-icon-search">查询</el-button>
  11.             </el-col>
  12.         </el-row>
  13.         <br />
  14.         <el-button type="primary" icon="el-icon-plus" @click="openAddCourseDialog()">新增</el-button>
  15.         <el-table :data="courseList" style="width: 100%" height="250">
  16.             <el-table-column prop="id" label="序号" width="120">
  17.             </el-table-column>
  18.             <el-table-column prop="name" label="专业名称" width="120">
  19.             </el-table-column>
  20.             <el-table-column prop="adminid" label="操作人" width="120">
  21.             </el-table-column>
  22.             <el-table-column prop="oper_time" label="操作时间" width="180">
  23.             </el-table-column>
  24.             <el-table-column label="操作">
  25.                 <template slot-scope="scope">
  26.                     <el-button size="mini" @click="openUpDateCourse(scope.row.id)">编辑</el-button>
  27.                     <el-button size="mini" type="danger" @click="deleteCourse(scope.row.id)">删除</el-button>
  28.                 </template>
  29.             </el-table-column>
  30.         </el-table>
  31.         <!--    </div> -->
  32.     <!--    放置组件,ref引用名 -->
  33.         <AddCourse ref="addCourse"></Addcourse>
  34.         <UpdateCourse ref="updateCourse"></UpdateCourse>
  35.     </el-card>
  36. </template>
  37. <script>
  38. import AddCourse from "./Add.vue";
  39. import UpdateCourse from "./Update.vue";
  40.     export default {
  41.         components:{
  42.             AddCourse,
  43.             UpdateCourse
  44.         },
  45.         data() {
  46.             return {
  47.                 courseList:[{
  48.                     id:"",
  49.                     name:"",
  50.                     adminid:"",
  51.                     oper_time:""    
  52.                 }]
  53.     }
  54.     },
  55.         methods:{
  56.              openAddCourseDialog(){
  57.                  this.$refs.addCourse.dialogFormVisible =true;
  58.              },
  59.              openUpDateCourse(id){
  60.                  this.$refs.updateCourse.dialogFormVisible =true;
  61.                  this.$refs.updateCourse.findStudentById(id);
  62.                  }, 
  63.              deleteCourse(id){
  64.                 this.$confirm('确定要删除吗?', '操作提示', {
  65.                             confirmButtonText: '确定',
  66.                             cancelButtonText: '取消',
  67.                             type: 'warning'
  68.                         }).then(() => {
  69.                             this.$http.get("admin/course?mark=delete&id=" + id).then((resp) => {
  70.                             this.$router.go(); //重载当前组件,刷新
  71.                         });     
  72.                 })
  73.         }
  74.         },
  75.         mounted() {
  76.         this.$http.get("/admin/course?mark=list").then((resp) => {
  77.             if (resp.data.code == 200) {
  78.                 console.log(resp);
  79.                 this.courseList = resp.data.data;
  80.         }
  81.     })
  82.     }}
  83. </script>
  84. ​
  85. <style>
  86. </style>
  87. ​
  1. //Update.vue
  2. ​
  3. <template>
  4.     <el-dialog title="修改专业" :visible.sync="dialogFormVisible">
  5.         <el-form :model="form">
  6.             <el-form-item label="专业名称">
  7.                 <el-input v-model="form.name" autocomplete="off"></el-input>
  8.             </el-form-item>
  9.         </el-form>
  10.         <div slot="footer" class="dialog-footer">
  11.             <el-button @click="dialogFormVisible = false">取 消</el-button>
  12.             <el-button type="primary" @click="dialogFormVisible =save()">保存</el-button>
  13.         </div>
  14.     </el-dialog>
  15. </template>
  16. ​
  17. <script>
  18.     export default {
  19.         data() {
  20.             return {
  21.                 dialogFormVisible: false,
  22.                 form: {
  23.                     id:"",//虽然不显示,但是需要提交的,唯一标识
  24.                     name: "",
  25.                     mark:"save"
  26.                 }
  27.             }
  28.         },
  29.         methods:{
  30.             findStudentById(id){
  31.                 //向后端发送请求,根据学生id,查询学生信息
  32.                 this.$http.get("admin/course?mark=findCourseById&id="+id).then((resp) => {
  33.                                    if(resp.data.code==200){
  34.                                        this.form.id=resp.data.data.id;
  35.                                        this.form.name=resp.data.data.name;
  36.                                    }
  37.                     })
  38.             },
  39.             save(){
  40.                     this.$confirm('确定要保存吗?', '操作提示', {
  41.                         confirmButtonText: '确定',
  42.                         cancelButtonText: '取消',
  43.                         type: 'warning'
  44.                     }).then(() => {
  45.                         this.$http.post("admin/course",jsonToString(this.form)).then((resp)=>{
  46.                         this.$router.go(); //重载当前组件,刷新
  47.                     });
  48.                 })
  49.             }
  50.         },  
  51.         mounted(){
  52.             
  53.         }
  54. }
  55.     function jsonToString(jsonobj){
  56.                            console.log(jsonobj)
  57.                            var str = "";
  58.                            for(var s in jsonobj){
  59.                                 str+=s+"="+jsonobj[s]+"&";    
  60.                            }
  61.                            return str.substring(0,str.length-1);
  62.         }
  63. </script>
  64. <style>
  65. </style>
​
  1. //index.js
  2. ​
  3. //vue-router是一个插件包,所以我们还是需要用npm来进行安装
  4. //打开命令行工具,进行你的项目目录,输入下面命令
  5. //npm i vue-router@3.5.3
  6. //vue router是一个路由管理器
  7. import Vue from 'vue';
  8. import router from 'vue-router';/* 导入路由 */
  9. import Login from '../Login.vue';/* 导入其他组件 */
  10. import Reg from "../Reg.vue";/* 导入其他组件 */
  11. import Main from "../Main.vue";/* 导入其他组件 */
  12. import StudentList from "../views/student/List.vue";
  13. import Course from "../views/course/course.vue";
  14. ​
  15. Vue.use(router);
  16. ​
  17. /* 定义组件路由 */
  18. var rout = new router({
  19. routes: [
  20. {
  21. path: '/login',//路由地址
  22. name: 'Login',
  23. component: Login//组件名
  24. },
  25. {
  26. path: '/main',
  27. component: Main,
  28. children:[//子组件的路由定义
  29.     {
  30.         path:"/studentList",
  31.         component:StudentList
  32.     },
  33.     {
  34.         path:"/course",
  35.         component:Course
  36.     }
  37. ]
  38. },
  39. {
  40.     path:'/reg',
  41.     component:Reg
  42. }
  43. ​
  44. ]
  45. });
  46. //添加路由导航守卫,每次发生路由时触发,to.path你要去的页面
  47. rout.beforeEach((to,from,next)=>{
  48. if(to.path=="/login"){//如果用户访问的登录页，直接放行
  49. return next();
  50. }else{
  51. var account =sessionStorage.getItem("account");
  52. if(account==null){
  53. return next("/login");
  54. }else{
  55.  return next();//已经登录
  56. }
  57. }
  58. })
  59. ​
  60. //导出路由对象
  61. export default rout;
  1. //App.vue
  2. <<template>
  3.   <div id="app">
  4.       <!-- router-view就是用来显示不同组件的,就向一个画布-->
  5.       <router-view></router-view>
  6.   </div>
  7. </template>
  8. <script>
  9. /* 导出组件,并为组件定义数据,函数,生命周期函数 */
  10.  export default{
  11.      data(){
  12.          return{
  13.         
  14.          }
  15.      }
  16.  }
  17. </script>
  18. <style>
  19. </style>
  1. //Login.vue
  2. <template>  
  3.      <div class="login_container">
  4.              <!-- 登录盒子-->
  5.              <div class="login_box">
  6.                   <!-- 头像盒子-->
  7.                   <div class="img_box">
  8.                         <img src="./assets/logo.png"/>
  9.                   </div>
  10.                   <div style="padding-top: 100px; padding-right: 30px;">
  11.                       <el-form ref="form" :model="form" :rules="rules" label-width="80px" >
  12.                         <el-form-item label="账号" prop="account">
  13.                             <el-input v-model="form.account" placeholder="请输入账号"></el-input>
  14.                         </el-form-item>
  15.                         <el-form-item label="密码" prop="password">
  16.                             <el-input v-model="form.password" placeholder="请输入密码"></el-input>
  17.                         </el-form-item>
  18.                         <el-form-item>
  19.                           <el-button  type="primary"  icon="el-icon-top"  @click="submitForm('form')">登录</el-button>
  20.                           <el-button icon="el-icon-delete-solid"  @click="resetForm('form')">取消</el-button>
  21.                         </el-form-item>
  22.                       </el-form>
  23.                   </div>
  24.              </div>
  25.           </div>
  26. </template>
  27. <script>
  28. /* 导出组件,并为组件定义数据,函数,生命周期函数 */
  29.   export default {
  30.      data() {
  31.        return {
  32.          form: {
  33.            account: '',
  34.            password: ''
  35.          },
  36.          rules: {
  37.            account: [
  38.              { required: true, message: '请输入正确的账号', trigger: 'blur' },
  39.              { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
  40.            ],
  41.            password: [
  42.              { required: true, message: '请输入正确的密码', trigger: 'blur' },
  43.              { min: 3, max: 6, message: '长度在 3 到 6 个字符',trigger: 'blur' }
  44.            ]
  45.          }
  46.        };
  47.      },
  48.      methods: {
  49.        submitForm(form) {
  50.            //引用,在此把前端登录表单中的数据向后端java发送  this.form
  51.          this.$refs[form].validate((valid) => {
  52.              //所有的都满足规则返回True,否则返回false
  53.            if (valid) {
  54.                this.$http.post("login",jsonToString(this.form)).then((resp)=>{
  55.                    // console.log(resp);
  56.                    console.log(resp.data.code);
  57.                    if(resp.data.code==200){
  58.                        //sessionStorage浏览器提供的一个会话级别的存储空间,浏览器关闭后立刻消失
  59.                       sessionStorage.setItem("account",resp.data.data.account);//浏览器关闭即清除
  60.                       sessionStorage.setItem("token",resp.data.data.token);
  61.                       // localStorage.setItem("key","value");//长久保存
  62.                        this.$router.push("/main");
  63.                    }else if(resp.data.code==201){
  64.                         this.$message({
  65.                                  message:resp.data.message,type: 'warning' });;
  66.                    }else{
  67.                        this.$message.error(resp.data.message);
  68.                    }
  69.                })
  70.               
  71.            } 
  72.          });
  73.        },
  74.        resetForm(form) {
  75.          this.$refs[form].resetFields();
  76.        }
  77.      }
  78.    }
  79.      //将json对象序列化为键=值&键=值
  80.                function jsonToString(jsonobj){
  81.                    console.log(jsonobj)
  82.                    var str = "";
  83.                    for(var s in jsonobj){
  84.                         str+=s+"="+jsonobj[s]+"&";    
  85.                    }
  86.                    return str.substring(0,str.length-1);
  87.                }
  88.  </script>
  89.  <style>
  90.    .login_container{
  91.      height: 100vh;
  92.      margin: 0px;
  93.      padding: 0px;
  94.     background-image:url(../v2-1853f9575237e195e823f6f2c73138ac_r.jpg);
  95.    }
  96.      .login_box{
  97.        width: 450px;
  98.        height: 350px;
  99.        background-color: #fff;
  100.        border-radius: 10px;
  101.        position: absolute;
  102.        left: 50%;
  103.        top: 50%;
  104.        transform: translate(-50%,-50%);  
  105.      }
  106.      .img_box{
  107.         width: 130px;
  108.         height: 130px;
  109.         position: absolute;
  110.         left: 50%;
  111.         transform: translate(-50%,-50%);
  112.         background-color: #fff;
  113.         border-radius: 50%;
  114.         padding: 5px;
  115.         border: 1px solid #eee;
  116.      }
  117.      .img_box img{
  118.           width: 100%;
  119.           height: 100%;
  120.           border-radius: 50%;
  121.           background-color: #eee;
  122.       }
  123.  </style>
  1. //main.js
  2. //main.js是项目核心配置文件
  3. //导入vue.js
  4. import Vue from 'vue'
  5. //导入一个默认的组件
  6. import App from './App.vue'
  7. Vue.config.productionTip = false
  8.  //导入路由组件   ./表示当前目录
  9. import router from "./router/index.js";
  10. Vue.use(router);
  11. //导入ElementUI框架, 会导入ElementUI中所有的组件
  12. import ElementUI from 'element-ui';
  13. import 'element-ui/lib/theme-chalk/index.css';
  14. Vue.use(ElementUI);
  15. //导入 axios
  16. import axios from 'axios';
  17. //设置访问后台服务器地址
  18. axios.defaults.baseURL="http://localhost:8080/webBack/";
  19. //将 axios 挂载到 vue 全局对象中,使用 this 可以直接访问
  20. Vue.prototype.$http=axios;
  21. //axios 请求拦截
  22. axios.interceptors.request.use(config =>{
  23. //为请求头对象，添加 Token 验证的 token 字段
  24. config.headers.token =sessionStorage.getItem('token');
  25. return config;
  26. })
  27. // 添加响应拦截器
  28. axios.interceptors.response.use((resp) =>{//正常响应拦截
  29. if(resp.data.code==500){
  30. ElementUI.Message({message:resp.data.message,type:"error"})
  31. }
  32. if(resp.data.code==202){
  33. sessionStorage.clear();
  34. router.replace("/login");
  35. }
  36. return resp;
  37. });
  38. //创建项目中唯一的一个vue对象
  39. new Vue({
  40.   render: h => h(App),  //默认将app.vue组件加载到唯一的index.html中的<div id="app">div上面,
  41.   router,
  42. }).$mount('#app')
  43. ​
  1. //Main.vue
  2. <!-- 后端管理界面 -->
  3. <template>
  4.     <el-container>
  5.         顶部
  6.       <el-header>
  7.           <el-dropdown>
  8.                   <i class="el-icon-setting" style="margin-right: 15px"></i>
  9.                   <el-dropdown-menu slot="dropdown">
  10.                     <el-dropdown-item>修改密码</el-dropdown-item>
  11.                     <el-dropdown-item><span @click="logOut()">安全退出</span></el-dropdown-item>
  12.                     <el-dropdown-item>个人信息</el-dropdown-item>
  13.                     <el-dropdown-item><span @click="test()">测试</span></el-dropdown-item>
  14.                   </el-dropdown-menu>
  15.           </el-dropdown>
  16.           <span>{{account}}</span>
  17.       </el-header>
  18.       <el-container>
  19.           <!-- 左侧菜单-->
  20.         <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
  21.              <el-menu :default-openeds="['1']" router>
  22.                   <el-submenu index="1">
  23.                     <template slot="title"><i class="el-icon-message"></i>功能菜单</template>
  24.                     <el-menu-item-group>
  25.                       <el-menu-item index="/studentList">学生管理</el-menu-item>
  26.                       <el-menu-item index="/course">课程管理</el-menu-item>
  27.                     </el-menu-item-group>
  28.                   </el-submenu>
  29.                 </el-menu>
  30.         </el-aside>
  31.         <!-- 右侧操作区间 -->
  32.         <el-main>
  33.             <router-view></router-view>
  34.         </el-main>
  35.       </el-container>
  36.     </el-container>
  37. </template>
  38. <script>
  39.   export default{
  40.       data(){
  41.           return{
  42.               account:""
  43.           }
  44.       },
  45.       methods:{
  46.           //安全退出
  47.           logOut(){
  48.               this.$confirm('确定要退出吗?', '操作提示', {
  49.                         confirmButtonText: '确定',
  50.                         cancelButtonText: '取消',
  51.                         type: 'warning'
  52.                       }).then(() => {
  53.                           sessionStorage.clear();
  54.                          this.$router.push("/login")
  55.                       });
  56.           }  , 
  57.       test(){
  58.           //将后端携带token,每次请求都需要发送一个token比较麻烦
  59.           this.$http.get("admin/test").then((resp)=>{
  60.           // sessionStorage.setItem("token",resp.data.data.token);
  61.           if(resp.data.code==200){
  62.               alert("测试成功");
  63.           }
  64.           }
  65.       );
  66.       },  
  67.       mounted(){
  68.         this.account=sessionStorage.getItem("account");
  69.         // if(this.account==null){判断浏览器中用户信息是否为空,如果为空,说明登录失败,应该跳转到登录界面
  70.         //  this.$router.push("/login");
  71.         // }    
  72.       }
  73.   }}
  74. </script>
  75. <style>
  76.      .el-header{
  77.         background-color: #0c81ff;
  78.         color: #333;
  79.         text-align: right;
  80.         line-height: 60px;
  81.       } 
  82.       .el-aside {
  83.         background-color: #D3DCE6;
  84.         color: #333;
  85.         text-align: center;
  86.         height: 100vh;
  87.       }
  88.       .el-main {
  89.         background-color: #E9EEF3;
  90.         color: #333;
  91.         text-align: center;
  92.         height: 100vh;
  93.       }
  94. </style>

后端代码

注意:Servlet和过滤器都需要在web-xml中进行配置.

  1. //CourseDao
  2. package feifan.com.servlet;
  3. ​
  4. import com.auth0.jwt.interfaces.DecodedJWT;
  5. import com.fasterxml.jackson.databind.ObjectMapper;
  6. import feifan.com.dao.CourseDao;
  7. import feifan.com.dao.StudentDao;
  8. import feifan.com.util.CommonResult;
  9. import feifan.com.util.JWTUtil;
  10. import javax.servlet.ServletException;
  11. import javax.servlet.http.HttpServlet;
  12. import javax.servlet.http.HttpServletRequest;
  13. import javax.servlet.http.HttpServletResponse;
  14. import java.io.IOException;
  15. import java.io.PrintWriter;
  16. import java.util.List;
  17. public class CourseServlet extends HttpServlet {
  18.     @Override
  19.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  20.       String mark=req.getParameter("mark");
  21.         System.out.println(mark);
  22.        if("list".equals(mark)){
  23.            findCourseList(req,resp);
  24.        }
  25.        if("delete".equals(mark)){
  26.            deleteCourse(req,resp);
  27.        }
  28.        if("findCourseById".equals(mark)){
  29.            findCourseById(req,resp);
  30.        }
  31.     }
  32.     private void findCourseById(HttpServletRequest req, HttpServletResponse resp) throws IOException {
  33.         resp.setHeader("Content-Type", "text/html;charset=utf-8");//设置响应内容的编码
  34.         PrintWriter pt=resp.getWriter();
  35.         CommonResult commonResult=null;
  36.         try{
  37.             String id=req.getParameter("id");
  38.             CourseDao courseDao=new CourseDao();
  39.             Course course=courseDao.findCourseById(id);
  40.             commonResult=new CommonResult(200,course,"查询成功");
  41.         }catch(Exception e){
  42.             e.printStackTrace();
  43.             commonResult=new CommonResult(500,null,"系统忙"+e.getMessage());
  44.         }
  45.         ObjectMapper objectMapper=new ObjectMapper();
  46.         String json= objectMapper.writeValueAsString(commonResult);
  47.         pt.print(json);
  48. ​
  49.     }
  50.     private void deleteCourse(HttpServletRequest req, HttpServletResponse resp) throws IOException {
  51.         resp.setHeader("Content-Type", "text/html;charset=utf-8");//设置响应内容的编码
  52.         PrintWriter pt=resp.getWriter();
  53.         CommonResult commonResult=null;
  54.         try{
  55.             String id=req.getParameter("id");
  56.             CourseDao courseDao=new CourseDao();
  57.             courseDao.deleteCourse(id);
  58.             commonResult=new CommonResult(200,null,"删除成功");
  59.         }catch(Exception e){
  60.             e.printStackTrace();
  61.             commonResult=new CommonResult(500,null,"系统忙"+e.getMessage());
  62.         }
  63.         ObjectMapper objectMapper=new ObjectMapper();
  64.         String json= objectMapper.writeValueAsString(commonResult);
  65.         pt.print(json);
  66.     }
  67.     private void findCourseList(HttpServletRequest req, HttpServletResponse resp) throws IOException {
  68.         resp.setHeader("Content-Type", "text/html;charset=utf-8");//设置响应内容的编码
  69.         PrintWriter pt=resp.getWriter();
  70.         CommonResult commonResult=null;
  71.         try{
  72.             CourseDao courseDao=new CourseDao();
  73.             List<Course> courseList= courseDao.courses();
  74.             commonResult=new CommonResult(200,courseList,"查询成功");
  75.         }catch(Exception e){
  76.             e.printStackTrace();
  77.             commonResult=new CommonResult(500,null,"系统忙"+e.getMessage());
  78.         }
  79.         ObjectMapper objectMapper=new ObjectMapper();
  80.         String json= objectMapper.writeValueAsString(commonResult);
  81.         pt.print(json);
  82.     }
  83. ​
  84.     @Override
  85.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  86.        String mark=req.getParameter("mark");
  87.         if("save".equals(mark)){
  88.             addCourse(req,resp);
  89.         }
  90.     }
  91.     private void addCourse(HttpServletRequest req, HttpServletResponse resp) throws IOException {
  92.         resp.setHeader("Content-Type", "text/html;charset=utf-8");//设置响应内容的编码
  93.         PrintWriter pt=resp.getWriter();
  94.         CommonResult commonResult=null;
  95.         try{
  96.             String id=req.getParameter("id");//修改有id,新增没有id
  97.             String name=req.getParameter("name");
  98.             //获取请求头中的token
  99.             String token = req.getHeader("token");
  100.             //解析token
  101.             DecodedJWT tokenInfo= JWTUtil.getTokenInfo(token);
  102.             //获取到token中的管理员信息
  103.             Integer adminid=tokenInfo.getClaim("id").asInt();
  104.             if(id==null){
  105.                 CourseDao studentDao=new CourseDao();
  106.                 boolean flag= studentDao.addCourse(name,adminid);
  107.                 commonResult=new CommonResult(200,flag,"添加成功");
  108.             }else{
  109.                 CourseDao studentDao=new CourseDao();
  110.                 boolean flag= studentDao.upDateCourse(id,name,adminid);
  111.                 commonResult=new CommonResult(200,flag,"修改成功");
  112.             }
  113.         }catch(Exception e){
  114.             e.printStackTrace();
  115.             commonResult=new CommonResult(500,null,"系统忙"+e.getMessage());
  116.         }
  117.         ObjectMapper objectMapper=new ObjectMapper();
  118.         String json= objectMapper.writeValueAsString(commonResult);
  119.         pt.print(json);
  120.     }
  121. }
  1. //CommonResult
  2. package feifan.com.util;
  3. ​
  4. public class CommonResult {
  5.     int code;
  6.     Object data;
  7.     String message;
  8. ​
  9.     public CommonResult(int code, Object data, String message) {
  10.         this.code = code;
  11.         this.data = data;
  12.         this.message = message;
  13.     }
  14.     public int getCode() {
  15.         return code;
  16.     }
  17.     public void setCode(int code) {
  18.         this.code = code;
  19.     }
  20.     public Object getData() {
  21.         return data;
  22.     }
  23.     public void setData(Object data) {
  24.         this.data = data;
  25.     }
  26.     public String getMessage() {
  27.         return message;
  28.     }
  29.     public void setMessage(String message) {
  30.         this.message = message;
  31.     }
  32. }

  1. //CourseServlet
  2. package feifan.com.servlet;
  3. ​
  4. import com.auth0.jwt.interfaces.DecodedJWT;
  5. import com.fasterxml.jackson.databind.ObjectMapper;
  6. import feifan.com.dao.CourseDao;
  7. import feifan.com.dao.StudentDao;
  8. import feifan.com.util.CommonResult;
  9. import feifan.com.util.JWTUtil;
  10. ​
  11. import javax.servlet.ServletException;
  12. import javax.servlet.http.HttpServlet;
  13. import javax.servlet.http.HttpServletRequest;
  14. import javax.servlet.http.HttpServletResponse;
  15. import java.io.IOException;
  16. import java.io.PrintWriter;
  17. import java.util.List;
  18. public class CourseServlet extends HttpServlet {
  19.     @Override
  20.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  21.       String mark=req.getParameter("mark");
  22.         System.out.println(mark);
  23.        if("list".equals(mark)){
  24.            findCourseList(req,resp);
  25.        }
  26.        if("delete".equals(mark)){
  27.            deleteCourse(req,resp);
  28.        }
  29.        if("findCourseById".equals(mark)){
  30.            findCourseById(req,resp);
  31.        }
  32.     }
  33.     private void findCourseById(HttpServletRequest req, HttpServletResponse resp) throws IOException {
  34.         resp.setHeader("Content-Type", "text/html;charset=utf-8");//设置响应内容的编码
  35.         PrintWriter pt=resp.getWriter();
  36.         CommonResult commonResult=null;
  37.         try{
  38.             String id=req.getParameter("id");
  39.             CourseDao courseDao=new CourseDao();
  40.             Course course=courseDao.findCourseById(id);
  41.             commonResult=new CommonResult(200,course,"查询成功");
  42.         }catch(Exception e){
  43.             e.printStackTrace();
  44.             commonResult=new CommonResult(500,null,"系统忙"+e.getMessage());
  45.         }
  46.         ObjectMapper objectMapper=new ObjectMapper();
  47.         String json= objectMapper.writeValueAsString(commonResult);
  48.         pt.print(json);
  49.     }
  50.     private void deleteCourse(HttpServletRequest req, HttpServletResponse resp) throws IOException {
  51.         resp.setHeader("Content-Type", "text/html;charset=utf-8");//设置响应内容的编码
  52.         PrintWriter pt=resp.getWriter();
  53.         CommonResult commonResult=null;
  54.         try{
  55.             String id=req.getParameter("id");
  56.             CourseDao courseDao=new CourseDao();
  57.             courseDao.deleteCourse(id);
  58.             commonResult=new CommonResult(200,null,"删除成功");
  59.         }catch(Exception e){
  60.             e.printStackTrace();
  61.             commonResult=new CommonResult(500,null,"系统忙"+e.getMessage());
  62.         }
  63.         ObjectMapper objectMapper=new ObjectMapper();
  64.         String json= objectMapper.writeValueAsString(commonResult);
  65.         pt.print(json);
  66.     }
  67. ​
  68.     private void findCourseList(HttpServletRequest req, HttpServletResponse resp) throws IOException {
  69.         resp.setHeader("Content-Type", "text/html;charset=utf-8");//设置响应内容的编码
  70.         PrintWriter pt=resp.getWriter();
  71.         CommonResult commonResult=null;
  72.         try{
  73.             CourseDao courseDao=new CourseDao();
  74.             List<Course> courseList= courseDao.courses();
  75.             commonResult=new CommonResult(200,courseList,"查询成功");
  76.         }catch(Exception e){
  77.             e.printStackTrace();
  78.             commonResult=new CommonResult(500,null,"系统忙"+e.getMessage());
  79.         }
  80.         ObjectMapper objectMapper=new ObjectMapper();
  81.         String json= objectMapper.writeValueAsString(commonResult);
  82.         pt.print(json);
  83.     }
  84.     @Override
  85.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  86.        String mark=req.getParameter("mark");
  87.         if("save".equals(mark)){
  88.             addCourse(req,resp);
  89.         }
  90.     }
  91.     private void addCourse(HttpServletRequest req, HttpServletResponse resp) throws IOException {
  92.         resp.setHeader("Content-Type", "text/html;charset=utf-8");//设置响应内容的编码
  93.         PrintWriter pt=resp.getWriter();
  94.         CommonResult commonResult=null;
  95.         try{
  96.             String id=req.getParameter("id");//修改有id,新增没有id
  97.             String name=req.getParameter("name");
  98.             //获取请求头中的token
  99.             String token = req.getHeader("token");
  100.             //解析token
  101.             DecodedJWT tokenInfo= JWTUtil.getTokenInfo(token);
  102.             //获取到token中的管理员信息
  103.             Integer adminid=tokenInfo.getClaim("id").asInt();
  104.             if(id==null){
  105.                 CourseDao studentDao=new CourseDao();
  106.                 boolean flag= studentDao.addCourse(name,adminid);
  107.                 commonResult=new CommonResult(200,flag,"添加成功");
  108.             }else{
  109.                 CourseDao studentDao=new CourseDao();
  110.                 boolean flag= studentDao.upDateCourse(id,name,adminid);
  111.                 commonResult=new CommonResult(200,flag,"修改成功");
  112.             }
  113.         }catch(Exception e){
  114.             e.printStackTrace();
  115.             commonResult=new CommonResult(500,null,"系统忙"+e.getMessage());
  116.         }
  117.         ObjectMapper objectMapper=new ObjectMapper();
  118.         String json= objectMapper.writeValueAsString(commonResult);
  119.         pt.print(json);
  120.     }
  121. }

  1. //LoginDao
  2. package feifan.com.dao;
  3. import feifan.com.servlet.Admin;
  4. import java.sql.*;
  5. public class LoginDao {
  6. ​
  7.     public Admin work(String account, String password) throws SQLException {
  8.         Admin admin=null;
  9.         Connection connection = null;
  10.         Statement st = null;
  11.         PreparedStatement ps = null;
  12.         Boolean df = false;
  13.         try {
  14.             Class.forName("com.mysql.cj.jdbc.Driver");//定义驱动程序名为jdbcName  com.mysql.cj.jdbc.Driver
  15.             //获取数据库连接,使用java.sql里面的DriverManager.getConnection来完成
  16.             connection = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/zp?serverTimezone=Asia/Shanghai", "root", "root");
  17.             //构造一个Statement 对象来执行SQL语句
  18.             st = connection.createStatement();
  19.             ps = connection.prepareStatement("select id,account from admin where account=? and pass=? ");//执行SQL语句
  20.             ps.setObject(1, account);
  21.             ps.setObject(2, password);
  22.             ResultSet resultSet = ps.executeQuery();//执行sql并返回结果结束.返回一个结果集(ResultSet)对象
  23.             while (resultSet.next()) {//遍历结果集
  24.                 admin=new Admin();
  25.                 admin.setId(resultSet.getInt("id"));
  26.                 admin.setAccount(resultSet.getString("account"));
  27.             }
  28.             System.out.println("数据库连接成功");
  29.         } catch (ClassNotFoundException | SQLException e) {
  30.             e.printStackTrace();
  31.         } finally {//关闭记录集
  32.             if (connection != null) {
  33.                 connection.close();
  34.             }
  35.             if(st!=null){
  36.                 st.close();
  37.             }
  38.             if(ps!=null){
  39.                 ps.close();
  40.             }
  41.         }
  42.         return admin;
  43.     }
  44. ​
  45. }
  1. //LoginDao
  2. package feifan.com.dao;
  3. import feifan.com.servlet.Admin;
  4. import java.sql.*;
  5. public class LoginDao {
  6. ​
  7.     public Admin work(String account, String password) throws SQLException {
  8.         Admin admin=null;
  9.         Connection connection = null;
  10.         Statement st = null;
  11.         PreparedStatement ps = null;
  12.         Boolean df = false;
  13.         try {
  14.             Class.forName("com.mysql.cj.jdbc.Driver");//定义驱动程序名为jdbcName  com.mysql.cj.jdbc.Driver
  15.             //获取数据库连接,使用java.sql里面的DriverManager.getConnection来完成
  16.             connection = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/zp?serverTimezone=Asia/Shanghai", "root", "root");
  17.             //构造一个Statement 对象来执行SQL语句
  18.             st = connection.createStatement();
  19.             ps = connection.prepareStatement("select id,account from admin where account=? and pass=? ");//执行SQL语句
  20.             ps.setObject(1, account);
  21.             ps.setObject(2, password);
  22.             ResultSet resultSet = ps.executeQuery();//执行sql并返回结果结束.返回一个结果集(ResultSet)对象
  23.             while (resultSet.next()) {//遍历结果集
  24.                 admin=new Admin();
  25.                 admin.setId(resultSet.getInt("id"));
  26.                 admin.setAccount(resultSet.getString("account"));
  27.             }
  28.             System.out.println("数据库连接成功");
  29.         } catch (ClassNotFoundException | SQLException e) {
  30.             e.printStackTrace();
  31.         } finally {//关闭记录集
  32.             if (connection != null) {
  33.                 connection.close();
  34.             }
  35.             if(st!=null){
  36.                 st.close();
  37.             }
  38.             if(ps!=null){
  39.                 ps.close();
  40.             }
  41.         }
  42.         return admin;
  43.     }
  44. ​
  45. }
 

  1. //LoginServlet
  2. package feifan.com.servlet;
  3. ​
  4. import com.fasterxml.jackson.databind.ObjectMapper;
  5. import feifan.com.dao.LoginDao;
  6. import feifan.com.util.CommonResult;
  7. import feifan.com.util.JWTUtil;
  8. ​
  9. ​
  10. import javax.servlet.ServletException;
  11. import javax.servlet.http.HttpServlet;
  12. import javax.servlet.http.HttpServletRequest;
  13. import javax.servlet.http.HttpServletResponse;
  14. import java.io.IOException;
  15. import java.io.PrintWriter;
  16. import java.sql.SQLException;
  17. ​
  18. public class LoginServlet_one extends HttpServlet {
  19. ​
  20. //    @Override
  21. //    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  22. //        resp.setHeader("Content-type", "text/html;charset=utf-8");//设置响应内容的编码
  23. //        PrintWriter pt = resp.getWriter();
  24. //
  25. //        System.out.println("测试成功");
  26. //        CommonResult commonResult = new CommonResult(200,null, "验证token");
  27. //        ObjectMapper objectMapper = new ObjectMapper();
  28. //        String json = objectMapper.writeValueAsString(commonResult);
  29. //        pt.print(json);
  30. //
  31. //    }
  32. ​
  33.     @Override
  34.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  35.         //req.setCharacterEncoding("utf-8");//设置的是请求数据的解析编码
  36.         //接收请求中自己的数据
  37.         //req是前端往后端发送的信息,resp是后端向前端发送的信息
  38.         String account = req.getParameter("account");//将前端发送过来的账号进行接收
  39.         String password = req.getParameter("password");//将前端发送过来的密码进行接收
  40. ​
  41.         CommonResult commonResult = null;
  42. ​
  43.         System.out.println(account);
  44.         resp.setHeader("Content-type", "text/html;charset=utf-8");//设置响应内容的编码
  45. ​
  46.         PrintWriter pt = resp.getWriter();
  47.         //处理访问dao与数据库交互,根据返回的结果向客户端响应内容
  48. ​
  49.         LoginDao loginDao = new LoginDao();//创建一个与数据库连接的对象
  50.         try {
  51.             Admin admin = loginDao.work(account, password);//调用对象中的work()方法
  52.             if (admin != null) {//如果判断数据库中有admin对象的数据,则进入此循环
  53.                 //登录成功,生成token,携带用户信息
  54.                 String token = JWTUtil.token(admin.getId(), admin.getAccount());//将后端通过账号&id生成的token
  55.                 admin.setToken(token);//在后端将token字符串添加到admin中
  56.                 commonResult = new CommonResult(200, admin, "登录成功");
  57. ​
  58.             } else {
  59.                 commonResult = new CommonResult(201, admin, "账号或者密码错误");
  60.             }
  61.         } catch (Exception throwables) {
  62.             throwables.printStackTrace();
  63.             commonResult = new CommonResult(500, null, "系统忙" + throwables.getLocalizedMessage());
  64.         }
  65.         //向前端发送信息
  66.         ObjectMapper objectMapper = new ObjectMapper();
  67.         String json = objectMapper.writeValueAsString(commonResult);
  68.         pt.print(json);
  69.     }
  70. }
  71. ​
 


                

        声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签
Copyright ©  2003-2013 www.wpsshop.cn  版权所有，并保留所有权利。

  
闽ICP备14008679号