• 基于前后端分离的增删改查

    一.后端

    1.了解前后端

    至少两台服务器

    访问
    浏览器-->前端服务器-->后端服务器（注意端口不要一样）

    返回数据

    后端服务器-->前端服务器-->浏览器

    2.Controller

    1. package top.remained.controller;
    2.  
    3. import io.swagger.annotations.Api;
    4. import lombok.extern.slf4j.Slf4j;
    5. import org.springframework.beans.factory.annotation.Autowired;
    6. import org.springframework.web.bind.annotation.CrossOrigin;
    7. import org.springframework.web.bind.annotation.GetMapping;
    8. import org.springframework.web.bind.annotation.RequestMapping;
    9. import org.springframework.web.bind.annotation.RestController;
    10. import top.remained.bean.User;
    11. import top.remained.service.UserService;
    12.  
    13. import java.util.HashMap;
    14. import java.util.List;
    15. import java.util.Map;
    16.  
    17. /**
    18.  * Project：before-after
    19.  * Date：2022/8/18
    20.  * Time：18:37
    21.  * Description：TODO
    22.  *
    23.  * @author lmk
    24.  * @version 1.0
    25.  */
    26. @RestController
    27. @RequestMapping("user")
    28. @CrossOrigin(value = "http://localhost:8080",maxAge = 3600)
    29. @Slf4j
    30. @Api("user")
    31. public class UserController {
    32.     @Autowired
    33.     UserService userService;
    34.     @GetMapping("/login")
    35.     public User login(String uName, String pwd){
    36.         log.info("登录"+uName);
    37.         return userService.login(uName, pwd) ;
    38.     }
    39.  
    40.     @GetMapping("/findAllUsers")
    41.     public Map findAllUsers( Integer index){
    42.         if (index == null) {
    43.             index =0;
    44.         }
    45.         int count = userService.getCount();
    46.         int finalPage = count%3==0? count/3:count/3+1;
    47.         Map hashMap = new HashMap<>();
    48.         List users = userService.findAllUsers(index, 3);
    49.         hashMap.put("users",users);
    50.         hashMap.put("finalPage",finalPage);
    51.         log.info("进入findAllUsers");
    52.         return hashMap;
    53.     }
    54.     @RequestMapping("/delUser")
    55.     public int  delUser(Integer uid){
    56.         log.info("进入删除"+uid);
    57.         if (uid != null) {
    58.             userService.delUser(uid);
    59.            return 1;
    60.         }
    61.         return 0;
    62.     }
    63.     @RequestMapping("/addUser")
    64.     public int addUser(User user){
    65.  
    66.         log.info("添加用户"+user.getUId());
    67.         return userService.addUser(user);
    68.     }
    69.     @RequestMapping("/updateUser")
    70.     public int updateUser(User user){
    71.         log.info("更改用户"+user.getUId());
    72.         return userService.updateUser(user);
    73.     }
    74.     @RequestMapping("/findUserById")
    75.     public User findUserById(Integer id){
    76.         log.info("findUserById用户"+id);
    77.         System.out.println( userService.findUserById(id).getUName());
    78.         return userService.findUserById(id);
    79.     }
    80. //    根据uName进行模糊查询
    81.     @RequestMapping("/findUserByLikeName")
    82.     public List findUserByLikeName(String uname){
    83.         log.info("进入模糊查询"+uname);
    84.         return userService.findUserByLikeName(uname);
    85.     }
    86. }

    3.遇到的问题

    1.跨域问题

    value 是前端的路径

    @CrossOrigin(value = "http://localhost:8080",maxAge = 3600)

    2.为什么我第二个返回的是Map而不用List

    我要传末页

    List传回去的数据

    1. [{"pwd":"123","type":1,"uname":"admin","uid":1},
    2. {"pwd":"123456","type":2,"uname":"胡歌","uid":2},
    3. {"pwd":"123456","type":2,"uname":"张哈哈","uid":5}]

    前台获取数据

    this.users=req.data

    Map传的数据

    1. {"users":[{"pwd":"123","type":1,"uid":1,"uname":"admin"},
    2. {"pwd":"123456","type":2,"uid":2,"uname":"胡歌"},
    3. {"pwd":"123456","type":2,"uid":5,"uname":"张哈哈"}],
    4. "finalPage":8}

    前台获取数据

    this.users=req.data.users

    注：从后台给的数据 变量都是小写的 即uId=>uid

    二.前端

    1.login.vue

    1. <template>
    2.     <div>
    3.         <form>
    4.             用户名：<input type="text" name="uName" v-model="uName"><br>
    5.             密码：<input type="text" name="pwd" v-model="pwd"><br>
    6.             <input type="button" value="登录" v-on:click="login" />
    7.         form>
    12.     div>
    13. template>
    14.  
    15. <script>
    16.     export default {
    17.         name: `login`,
    18.         // 用来封装数据的
    19.         data(){
    20.             return{
    21.                 uName:'',
    22.                 pwd:''
    23.  
    24.             }
    25.  
    26.         },
    27.         methods: {
    28.             login: function(){
    29.                 //变量为未被使用时报错
    30.                 //获取模型中的数据
    31.                 let uName = this.uName;
    32.                 let pwd = this.pwd;
    33.                 // const  that=this
    34.                 //传给后台的数据
    35.                 this.$http.get("http://localhost:8081/user/login?uName="+uName+"&pwd="+pwd).then(req => {
    36.                         // 判断有没有返回对象
    37.                 if(typeof(req.data) == 'object'){
    38.                     this.$router.push({name:'user_list'})
    39.                     //,params:{sname: uName}
    40.                 }else {
    41.                     alert("用户名或密码错误");
    42.                 }
    43.  
    44.  
    45.  
    46.  
    47.                 }
    48.  
    49.                 );
    50.             }
    51.  
    52.         }
    53.  
    54.     }
    55. script>
    56.  
    57. <style scoped>
    58.  
    59. style>

    效果

     

    2.user_list.vue

    1. <template>
    2.  
    3.         <div id="body">
    4.             <form>
    5.             <input type="search" v-model="name">
    6.                 <input type="button" v-on:click="likeName" value="搜索">
    7.             form>
    8.             <table  id="mytable" cellspacing="0">
    9.                 <caption> caption>
    10.                 <tr>
    11.                     <th scope="col">idth>
    12.                     <th scope="col">姓名th>
    13.                     <th scope="col">密码th>
    14.                     <th scope="col">类型th>
    15.                     <th scope="col">操作th>
    16.  
    17.                 tr>
    18.                 <tr v-for="(item,index) in users" :key="index">
    19.                     <td class="row">{{item.uid}}td>
    20.                     <td class="row">{{item.uname}}td>
    21.                     <td class="row">{{item.pwd}}td>
    22.                     <td class="row">{{item.type}}td>
    23.                     <td class="row">
    24.                         <button id="del" class="btn btn-primary" v-on:click="del(item.uid)">删除button>
    25.                         <button  v-on:click="update(item.uid)">修改button>
    26.                     td>
    27.                 tr>
    28.             table>
    29.             <button v-on:click="add()">添加button>
    31.             <button v-if="index>0" v-on:click="firstPage(0)">首页button>
    32.             <button v-if="index>0" v-on:click="upPage(index-1)">上一页button>
    33.             <button v-if="index v-on:click="downPage(index+1)">下一页button>
    34.             <button v-if="index v-on:click="endPage(finalPage)">末页button>
    35.  
    37.             <h1>{{ $route.params.sname}}h1>
    38.         div>
    39. template>
    40.  
    41. <script>
    42.  
    43.     export default {
    44.         name: `user_list`,
    45.  
    46.         data(){
    47.  
    48.             return{
    49.  
    50.  
    51.                 users:[
    52.                     {
    53.                         //uId自动转换为uid
    54.                         uid:'',
    55.                         uname:'',
    56.                         pwd:'',
    57.                         type:''
    58.                     }
    59.                 ],
    60.                 index:0,
    61.                 finalPage:0,
    62.                 name:'输入要搜索的名字',
    63.             }
    64.  
    65.         },
    66.         mounted(){
    67.  
    68.  
    69.             this.$http.get("http://localhost:8081/user/findAllUsers?index=0&size=2").then(req => {
    70.  
    71.                 this.users=req.data.users
    72.                 //获取末页，加载时获取一次就行 第一页index=0
    73.                 this.finalPage=req.data.finalPage-1
    74.  
    75.  
    76.  
    77.  
    78.             })
    79.         },
    80.         methods: {
    81.             //页面操作
    82.             firstPage: function (index) {
    83.                     this.$http.get("http://localhost:8081/user/findAllUsers?index="+index).then(req => {
    84.  
    85.                         this.users=req.data.users
    86.                         this.index = index;
    87.  
    88.                     });
    89.                 },
    90.             upPage: function (index) {
    91.                 this.$http.get("http://localhost:8081/user/findAllUsers?index="+index).then(req => {
    92.  
    93.                     this.users=req.data.users
    94.  
    95.                     this.index = index;
    96.  
    97.                 });
    98.             },
    99.             downPage: function (index) {
    100.                 this.$http.get("http://localhost:8081/user/findAllUsers?index="+index).then(req => {
    101.  
    102.                     this.users=req.data.users
    103.  
    104.                     this.index =index;
    105.  
    106.  
    107.                 });
    108.             },
    109.             endPage: function (index) {
    110.                 this.$http.get("http://localhost:8081/user/findAllUsers?index="+index).then(req => {
    111.  
    112.                     this.users=req.data.users
    113.  
    114.                     this.index =index;
    115.  
    116.  
    117.                 });
    118.             },
    119.             //删
    120.             del: function (uid) {
    121.                 this.$http.get("http://localhost:8081/user/delUser?uid="+uid).then(req => {
    122.                     if (req.data==1) {
    123.                         alert("删除成功")
    124.  
    125.                     }else {
    126.                         alert("删除失败")
    127.                     }
    128.                     location.reload()
    129.                 });
    130.             },
    131.             //增
    132.             add: function () {
    133.                         this.$router.push({name:'user_add'})
    134.             },
    135.             //改
    136.             update: function (uid) {
    137.  
    138.                 //从后端返回的数据全部时小写的 传user对象
    139.                 this.$http.get("http://localhost:8081/user/findUserById?id="+uid).then(req => {
    140.  
    141.                     this.$router.push({name:'update_user',params:{user: req.data} })
    142.  
    143.  
    144.                 });
    145.             },
    146.             //查
    147.             likeName: function () {
    148.  
    149.                 //从后端返回的数据全部时小写的 传user对象
    150.                 this.$http.get("http://localhost:8081/user/findUserByLikeName?uname="+this.name).then(req => {
    151.  
    152.                     this.$router.push({name:'user_like_name',params:{users: req.data} })
    153.  
    154.  
    155.                 });
    156.             }
    157.  
    158.         }
    159.     }
    160. script>
    161.  
    162. <style scoped>
    163.  
    164.  
    165.     #body {
    166.         text-align:center;
    167.         font: normal 11px  "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    168.         color: #4f6b72;
    169.         background: #E6EAE9;
    170.     }
    171.  
    172.     a {
    173.         color: #c75f3e;
    174.     }
    175.  
    176.     #mytable {
    177.         width: 700px;
    178.         padding: 0;
    179.         margin: 0;
    180.     }
    181.  
    182.     caption {
    183.         padding: 0 0 5px 0;
    184.         width: 700px;
    185.         font: italic 20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    186.         text-align: right;
    187.     }
    188.  
    189.     th {
    190.         font: bold 20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    191.         color: #4f6b72;
    192.         border-right: 1px solid #C1DAD7;
    193.         border-bottom: 1px solid #C1DAD7;
    194.         border-top: 1px solid #C1DAD7;
    195.         letter-spacing: 2px;
    196.         text-transform: uppercase;
    197.         text-align: left;
    198.         padding: 6px 6px 6px 12px;
    199.         background: #CAE8EA  no-repeat;
    200.     }
    201.  
    202.     th.nobg {
    203.         border-top: 0;
    204.         border-left: 0;
    205.         border-right: 1px solid #C1DAD7;
    206.         background: none;
    207.     }
    208.  
    209.     td {
    210.         border-right: 1px solid #C1DAD7;
    211.         border-bottom: 1px solid #C1DAD7;
    212.         background: #fff;
    213.         font-size:20px;
    214.         padding: 6px 6px 6px 12px;
    215.         color: #4f6b72;
    216.     }
    217.  
    218.  
    219.     td.alt {
    220.         background: #F5FAFA;
    221.         color: #797268;
    222.     }
    223.  
    224.     th.spec {
    225.         border-left: 1px solid #C1DAD7;
    226.         border-top: 0;
    227.         background: #fff no-repeat;
    228.         font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    229.     }
    230.  
    231.     th.specalt {
    232.         border-left: 1px solid #C1DAD7;
    233.         border-top: 0;
    234.         background: #f5fafa no-repeat;
    235.         font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    236.         color: #797268;
    237.     }
    238.     /*---------for IE 5.x bug*/
    239.     html>body td{ font-size:11px;}
    240.     body,td,th {
    241.         font-family: 宋体, Arial;
    242.         font-size: 12px;
    243.     }
    244.     .color1{
    245.         color: blue;
    246.     }
    247. style>

    效果

     3.user_add.vue

    1. <template>
    2.     <div>
    3.         <form>
    4.            用户名： <input type="text"  v-model="uName" ><br>
    5.             密码:  <input type="text"  v-model="pwd" ><br>
    6.            类型:  <input type="text"  v-model="type" ><br>
    7.  
    8.             <input type="button" value="提交" v-on:click="add()">
    9.         form>
    10.     div>
    11. template>
    12.  
    13. <script>
    14.     export default {
    15.         name: `user_add`,
    16.         data(){
    17.             return {
    18.                     uName: '',
    19.                     pwd: '',
    20.                     type: '',
    21.         }
    22.         },
    23.         methods: {
    24.             add: function(){
    25.                
    26.                 this.$http.get("http://localhost:8081/user/addUser?uName="+this.uName+"&pwd="+this.pwd+"&type="+this.type).then(req => {
    27.  
    28.                     if (req.data===1) {
    29.                         alert("添加成功")
    30.  
    31.                     }else {
    32.                         alert("添加失败")
    33.                     }
    34.                     this.$router.push({name:'user_list'})
    35.  
    36.                     }
    37.  
    38.                 );
    39.             }
    40.  
    41.         }
    42.  
    43.     }
    44.  
    45.  
    46. script>
    47.  
    48. <style scoped>
    49.  
    50. style>

    4.update.vue

    1. <template>
    2.     <div>
    3.         <form>
    4.                     <input type="hidden" v-model="uId">
    5.             用户名： <input type="text"  v-model="uName" ><br>
    6.             密码:  <input type="text"  v-model="pwd"><br>
    7.             类型:  <input type="text"  v-model="type"><br>
    8.             <input type="button" value="保存" v-on:click="save">
    9.         form>
    11.     div>
    12. template>
    13.  
    14. <script>
    15.     export default {
    16.         name: `update_user`,
    17.         data(){
    18.             return {
    19.                 uName: '',
    20.                 pwd: '',
    21.                 type:'',
    22.                 uId:''
    23.             }
    24.         },mounted(){
    25.             this.uName = this.$route.params.user.uname
    26.             this.pwd = this.$route.params.user.pwd
    27.             this.type = this.$route.params.user.type
    28.             this.uId = this.$route.params.user.uid
    29.         },
    30.  
    31.         methods: {
    32.             save: function(){
    33.  
    34.                 this.$http.get("http://localhost:8081/user/updateUser?uName="+this.uName+"&pwd="+this.pwd+"&type="+this.type+"&uId="+this.uId).then(req => {
    35.                         if (req.data==1){
    36.                             alert("更改成功")
    37.  
    38.                         } else {
    39.                             alert("更改失败")
    40.                         }
    41.                     alert("跳转")
    42.                    this.$router.push({name:'user_list'})
    43.                     
    44.                     }
    45.  
    46.                 );
    47.             }
    48.  
    49.         }
    50.  
    51.     }
    52.  
    53.  
    54. script>
    55.  
    56. <style scoped>
    57.  
    58. style>

    5.user_list.vue

    1. <template>
    2.     <div>
    3.         <table  id="mytable" cellspacing="0">
    4.             <caption> caption>
    5.             <tr>
    6.                 <th scope="col">idth>
    7.                 <th scope="col">姓名th>
    8.                 <th scope="col">密码th>
    9.                 <th scope="col">类型th>
    10.  
    11.  
    12.             tr>
    13.             <tr v-for="(item,index) in users" :key="index">
    14.                 <td class="row">{{item.uid}}td>
    15.                 <td class="row">{{item.uname}}td>
    16.                 <td class="row">{{item.pwd}}td>
    17.                 <td class="row">{{item.type}}td>
    18.  
    19.             tr>
    20.         table>
    21.     div>
    22. template>
    23.  
    24. <script>
    25.     export default {
    26.         name: "user_like_name",
    27.         data(){
    28.             return{
    29.  
    30.                 users:[
    31.                     {
    32.                         //uId自动转换为uid
    33.                         uid:'',
    34.                         uname:'',
    35.                         pwd:'',
    36.                         type:''
    37.                     }
    38.                 ],
    39.             }
    40.         },
    41.         mounted(){
    42.                 this.users=this.$route.params.users
    43.         },
    44.     }
    45. script>
    46.  
    47. <style scoped>
    48.  
    49. style>

    6.index.js

    1. import Vue from  'vue'
    2. import Router from 'vue-router'
    3. import login  from "@/components/login"
    4. import index from  '@/components/index'
    5. import test from "@/components/test"
    6. import user_list from "@/components/user_list"
    7. import user_add from "@/components/user_add";
    8. import update_user from "@/components/update_user";
    9. import user_like_name from "@/components/user_like_name";
    10.  
    11. //导包爆红，没让他自动导入依赖，通过Vue加载Router
    12. Vue.use(Router)
    13.  
    14. //创建路由管理器  一个组件 切换不同模板
    15. export  default new Router({
    16. //    创建路由的数组  一个资源对应一个router对应一个对象{}
    17.     routes:[{
    18.         path:'/',
    19.         name:'login',
    20.         component:login
    21.     },{
    22.         path:'/index',
    23.         name:'index',
    24.         component:index
    25.     },
    26.         {
    27.             //    映射路径
    28.             path:'/test',
    29.             name:'test',
    30.             //    对应import的名字
    31.             component:test
    32.         },  {
    33.             path:'/user_list',
    34.             name:'user_list',
    35.             component:user_list
    36.         }, {
    37.         path:'/user_add',
    38.         name:'user_add',
    39.         component:user_add
    40. }, {
    41.             path:'/update_user',
    42.             name:'update_user',
    43.             component:update_user
    44.         }, {
    45.             path:'/user_like_name',
    46.             name:'user_like_name',
    47.             component:user_like_name
    48.         }]
    49.  
    50.  
    51.  
    52. })

    7.main.js

    1. import Vue from 'vue'
    2. import App from './App.vue'
    3. import router from  './router'
    4. import axios from 'axios'
    5. Vue.config.productionTip = false
    6. //给axios定义一个名字$http
    7. Vue.prototype.$http=axios
    8. //全局的 可以取全部插件
    9. //全局加载
    10. //动态加载不需要重启
    11. new Vue({
    12.   render: h => h(App),
    13.   router
    14. }).$mount('#app')

    8.App.vue

    1. <template>
    2.   <div id="app">
    3.     <router-view>router-view>
    4.   div>
    5. template>
    6.  
    7. <script>
    8. // import HelloWorld from './components/HelloWorld.vue'
    9.  
    10. export default {
    11.   name: 'App',
    12.   components: {
    13.     // HelloWorld
    14.   }
    15. }
    16. script>
    17.  
    18. <style>
    19. #app {
    20.   font-family: Avenir, Helvetica, Arial, sans-serif;
    21.   -webkit-font-smoothing: antialiased;
    22.   -moz-osx-font-smoothing: grayscale;
    23.   text-align: center;
    24.   color: #2c3e50;
    25.   margin-top: 60px;
    26. }
    27. style>

    9.遇到的问题

    1.地址栏出现？

     form表单你****的***。type=button不是submit，这样就行了

    2.创建vue的步骤

    ，1.配置路由index.js
       (1 import test from "@/components/test"引入
    （2  

    1. //    创建路由的数组  一个资源对应一个router对应一个对象{}
    2.     routes:[{
    3.         path:'/',
    4.         name:'login',
    5.         component:login
    6.     },{
    7.         path:'/index',
    8.         name:'index',
    9.         component:index
    10.     },}


    2.script写入模板语法

    1. script>
    2.     export default {
    3.         name: `test`,
    4.         data(){
    5.             return{
    6.             //    里面json数据
    7.                 msg: 'hello',
    8.                 books:[{
    9.             id:1,
    10.             name: 'ss',
    11.             author: 'zz'
    12.             },{
    13.                     id:2,
    14.                     name: 'aa',
    15.                     author: 'bb'
    16.                 }]
    17.             }
    18.         },
    19.         //初始化时加载 mounted
    20.         created(){
    21.                 alert(123)
    22.         },    methods: {
    23.             save: function(){
    24.  
    25.                 this.$http.get("http://localhost:8081/user/updateUser?uName="+this.uName).then(req => {
    26.                         if (req.data==1){
    27.                             alert("更改成功")
    28.  
    29.                         } else {
    30.                             alert("更改失败")
    31.                         }
    32.                     alert("跳转")
    33.                    this.$router.push({name:'user_list'})
    34.  
    35.                     }
    36.  
    37.                 );
    38.             }
    39.  
    40.         }
    41.     }

    注意v-model和`login`

  • 相关阅读:
    SQL数据库添加新账号，只操作指定数据库
    python多线程系列—Event对象(六)
    大数据之——Hive
    NLP之搭建RNN神经网络
    如何实现前端项目的自动化测试？
    使用OkHttp和Java来下载
    [尚硅谷React笔记]——第9章 ReactRouter6
    【精讲】vue中的集成动画及配置代理
    Rest Template 使用
    SpringCloud Alibaba —— nacos集群设置
  • 原文地址：https://blog.csdn.net/qq_46058550/article/details/126441290