代碼地址

前端地址：//github.com/Snowstorm0/SpringAndVue-vue

后端地(di)址：//github.com/Snowstorm0/SpringAndVue-spring

1 數據庫(ku)

創建MySQL數據庫。

表名為user_data，人員(yuan)信息有(you)number、name。

2 前(qian)端

2.1 創建項目

打(da)開(kai)cmd，輸入ui命令：

vue ui

若沒有反應，可(ke)能是版(ban)本太(tai)低，需要卸載后重(zhong)裝：

npm uninstall vue-cli -g   #卸載(zai)
npm install @vue/cli -g    #安裝

執行(xing)ui命令(ling)成功后(hou)，會出現提示：

?? Starting GUI... ?? Ready on //localhost:8000

并(bing)會(hui)自動(dong)打開(kai)頁面。

創建名為SpringAndVue-vue的項(xiang)目，預設選擇“手動(dong)”；功能(neng)開啟 Babel、Router、Vuex、Linter/Formatter；配(pei)置(zhi)選擇“ESLint with error prevention only”；版本建(jian)議(yi)使(shi)用(yong) “vue2.0”。創建(jian)新(xin)項(xiang)目。

通(tong)過cd進入(ru)目(mu)錄(lu)，啟動項目(mu)：

npm run serve

2.2 安裝插(cha)件

安(an)裝 element-ui 插件。

打開cmd，輸入ui命令：

vue ui

在插件(jian)項搜索，并(bing)點擊(ji)安裝。

vue2.0 選(xuan)擇(ze)安(an)(an)裝 “vue-cli-plugin-element”；vue3.0 選(xuan)擇(ze)安(an)(an)裝 “vue-cli-plugin-element-plus”。

Terminal安裝(zhuang)(zhuang)axios，每個新項目都需(xu)要安裝(zhuang)(zhuang)：

# vue-cli2.0命令(ling)
npm install axios
# vue-cli3.0命令
npm add axios

2.3 添加模塊

2.3.1 主頁(ye)

在views文件夾下創建文件 HomePage.vue，內容如下：

<template>
    <div>
    用戶列(lie)表
        <el-table
                :data="tableData"
                border
                style="width: 40%">
            <el-table-column
                    prop="number"
                    label="編號(hao)"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="150">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="160">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">修(xiu)改</el-button>
                    <el-button @click="deleteClick(scope.row)" type="text" size="small">刪(shan)除</el-button>
                </template>
            </el-table-column>
        </el-table>
?
?
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                page-size="2"
                @current-change="page">
        </el-pagination>
?
    </div>
</template>
?
<script>
    import axios from 'axios';
    export default {
        name: "HomePage",
        methods: {
            handleClick(row) {
                this.$router.push({
                    path: '/useredit',
                    query:{
                        number: row.number,
                        name: row.name
         &nbsp;  ;        }
 &nbsp;              })
            },
            deleteClick(row){
                // var that=this;
                axios.delete('//localhost:8081/homepage/delete/'+row.number).then(function (response) {
                    console.log(response)
                })
            },
            //當被點擊頁數的時候(hou)，跳轉(zhuan)
            page(currPage){
                var that=this;
                axios.get('//localhost:8081/homepage/query/'+(currPage-1)*3+'/3').then(function (response) {
                    that.tableData=response.data;
                })
            }
        },
        //被創建的時候，顯示第一頁
        created() {
            var that=this;
            axios.get('//localhost:8081/homepage/query/0/3').then(function (response) {
                //給數據
                that.tableData=response.data;
                // console.log(response.data)
            }),
                axios.get('//localhost:8081/homepage/all').then(function (response) {
                    //獲得總長(chang)度
                    that.total=response.data.length ;
 &nbsp;              })
        },
        data() {
            return {
                total: 10,
                tableData: [{
                    number: '編號',
                    name: '姓名'
   &nbsp;     &nbsp;      }]
            }
        }
    }
</script>
<style scoped>
</style>

2.3.2 查看用戶(hu)

在views文件(jian)夾下創(chuang)建文件(jian)：UserView.vue，內容如下：

<template>
    <div>
        <table>
            <tr>
                <td>編號</td>
                <td>姓名(ming)</td>
            </tr>
            <tr v-for="user in users"  :key="user">
                <td>{{user.number}}</td>
                <td>{{user.name}}</td>
            </tr>
        </table>
    </div>
</template>
?
<script>
    import axios from 'axios';
    export default {
        name: "UserView",
        data(){
            return {
                users:[
                    {
                        number: 1003,
                        name: '張(zhang)三(san)',
             &nbsp;      },
                    {
                        number: 1004,
                        name: '李(li)四',
       &nbsp;            }
                ]
            }
        },
        created() {
            var that=this;
            axios.get('//localhost:8081/homepage/view').then(function (resp) {
                that.users=resp.data;
            })
        }
    }
</script>
<style scoped>
</style>

2.3.3 添加用戶

在(zai)views文件(jian)夾下(xia)創建文件(jian)：UserAdd.vue，內容如下(xia)：

<template>
    <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用戶編號(hao)" prop="number">
                <el-input  v-model="ruleForm.number" ></el-input>
            </el-form-item>
            <el-form-item label="用戶(hu)名(ming)" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重(zhong)置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
?
<script>
    import axios from 'axios';
    export default {
        name: "UserAdd",
        data() {
            var validateNumber = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('請輸入用戶編(bian)號'));
                } else {
                    if (this.ruleForm.number !== '') {
                        //如果不為空
                 &nbsp;  }
                    callback();
                }
            };
            var validateName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('請輸入用戶名'));
                } else {
                    if (this.ruleForm.name !== '') {
                        //如果不為空
       &nbsp; &nbsp;          }
                    callback();
   &nbsp;            }
            };
            return {
                ruleForm: {
                    number: '',
                    name: ''
                },
                rules: {
                    number: [
                        { validator: validateNumber, trigger: 'blur' }
       &nbsp; &nbsp;          ],
                    name: [
                        { validator: validateName, trigger: 'blur' }
                    ]
           &nbsp;    }
            };
        },
        methods: {
            submitForm(formName) {
                var that=this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //提交成功后要做的事(shi)情
                        // alert('submit!');
                        console.log(that.ruleForm)
                        axios.post('//localhost:8081/homepage/add',that.ruleForm).then(function (response) {
                            console.log(response);
             &nbsp;          })
                    } else {
                        console.log('error submit!!');
                        return false;
           &nbsp;        }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>
?
<style scoped>
?
</style>

2.3.4 修改App

修改App.vue為：

<template>
  <div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1']" router>
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>用戶管理</template>
            <el-menu-item-group>

              <el-menu-item index="/">首頁</el-menu-item>
              <el-menu-item index="/userView">全部用戶</el-menu-item>
              <el-menu-item index="/userAdd">添加用戶</el-menu-item>
            </el-menu-item-group>

          </el-submenu>

        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <span>Snowstorm</span>
        </el-header>
        <br><br>
        <router-view></router-view>

      </el-container>
    </el-container>


  </div>
</template>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>


<script>
  export default {
    data() {
      const item = {

      };
      return {
        tableData: Array(20).fill(item)
      }
    }
  };
</script>

2.3.5 修改(gai)index

在 router/index.js 中 const routes 函數修改為(wei)：

const routes = [
  {
    path: '/',
    name: '首頁',
    component: HomePage
  },
  {
    path: '/userview',
    name: '全部用戶',
    component: () => import(/* webpackChunkName: "user" */ '../views/UserView.vue')
   },
   {
    path: '/useradd',
    name: '添加用戶',
    component: () => import(/* webpackChunkName: "user" */ '../views/UserAdd.vue')
   },
   {
    path: '/useredit',
    name: '編輯用戶',
    component: () => import(/* webpackChunkName: "user" */ '../views/UserAdd.vue')
   }
]

3 后端

3.1 Controller

內容為(wei)：

@RestController
@RequestMapping("/homepage")
public class MyController {

    @Resource
    MyService myService;

    // 查看全部數據
    @GetMapping("/view")
    public List<UserDTO> userView(){
        return myService.userView();
    }

    // 增
    @PostMapping("/add")
    public int userAdd(@RequestBody UserDTO user){
        myService.userAdd(user);
        return 0;
    }

    // 刪
    @DeleteMapping("/delete/{number}")
    public int deleteBook(@PathVariable("number") Integer number){
        return myService.userDelete(number);
    }
    // 改
    @PutMapping("/edit")
    public int userEdit(@RequestBody UserDTO user){
        return myService.userEdit(user);
    }
    // 查
    @GetMapping("/query/{start}/{length}")
    public List<UserDTO> userQuery(@PathVariable("start") Integer start,@PathVariable("length") Integer length){
        System.out.println("users:" + myService.userQuery(start, length) + "\n");
        return myService.userQuery(start, length);
    }
}

3.2 Service

內(nei)容為：

@Service
@EnableScheduling
public class MyServiceImpl implements MyService {
    @Resource
    MyMapper myMapper;
    // 返回全部用戶類
    public List<UserDTO> userView(){
        System.out.println("users:" + myMapper.userView() + "\n");
        return myMapper.userView();
    }
    public Integer userAdd(UserDTO user){
        System.out.println("users:" + user + "\n");
        return myMapper.userAdd(user);
    }
    public Integer userDelete(int number){
        System.out.println("number:" + number + "\n");
        return myMapper.userDelete(number);
    }
    public Integer userEdit(UserDTO user){
        System.out.println("user:" + user + "\n");
        return myMapper.userEdit(user);
    }
    public List<UserDTO> userQuery(int start, int length){
        System.out.println("start:" + start + "high:" + length + "\n");
        return myMapper.userQuery(start, length);
    }
}

3.3 dao

內容(rong)為：

@Mapper
public interface MyMapper {
    List<UserDTO> userView();
    Integer userAdd(UserDTO user);
    Integer userDelete(int number);
    Integer userEdit(UserDTO user);
    List<UserDTO> userQuery(int start, int length);
}

3.4 model

文(wen)件名UserDTO，內容為(wei)：

@Data
public class UserDTO {
    private Integer number;
    private String name;
    public Integer getNumber() {
        return number;
    }
    public void setNumber(Integer number) {
        this.number = number;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}

3.5 跨域配置

文件名Config，內容為：

@Configuration
public class Config implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","HEAD","POST","DELETE","OPTIONS","PUT")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}