我發(fā)現(xiàn)我好久沒有更新了，寫一篇證明我還活著拔恰。
既然是前后端分離的話因谎，肯定是要有前端和后端的。
這里前端我使用的Vue+ElementUI,后端采用的是SpringBoot+Mybatis+Swagger2颜懊。
下面的話财岔，我就做一個(gè)簡單的Demo吧风皿。
寫的不好，請大家各位大佬們指點(diǎn)

1匠璧、后端

后端的話桐款，我是使用之前基礎(chǔ)上面改的。EasyCode(代碼神器)

1.1 pom.xml

   <!--Swagger2-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.5.0</version>
        </dependency>
        <dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>swagger-bootstrap-ui</artifactId>
            <version>1.9.3</version>
        </dependency>

1.2 添加Swagger配置類

image.png

/**
 * Swagger2
 * 該項(xiàng)目訪問地址：http://127.0.0.1:8089/doc.html
 * @author wangxl
 * @date 2019/8/16 20:19
 */
@Configuration
public class Swagger2 {
    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.vue.demo"))
                .paths(PathSelectors.any())
                .build();
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("Vue接口測試")
                .description("簡單優(yōu)雅的restful風(fēng)格")
                .termsOfServiceUrl("www.wangxianlin@icloud.com")
                .version("1.0")
                .build();
    }
}

1.3 添加注解

image.png

• 在啟動(dòng)類中夷恍，需要添加一個(gè)注解

  
  
  image.png

1.4 然后啟動(dòng)項(xiàng)目

瀏覽器輸入網(wǎng)址：http://127.0.0.1:8089/doc.html

image.png

• 測試完魔眨，所有的接口沒有問題了，現(xiàn)在我們就來編寫前端的界面酿雪。

2遏暴、前端

前端，我使用的是Vue+ElementUi寫的指黎，界面簡潔美觀朋凉。

2.1 新建一個(gè)Vue項(xiàng)目

這里的話，我就不多說了醋安，直接貼上一個(gè)鏈接：使用webstorm來創(chuàng)建并且運(yùn)行vue項(xiàng)目詳細(xì)教程

2.2 前端目錄：

前端目錄.png

• 前端界面杂彭，我是用的是element-ui，感覺界面看起來很舒服吓揪。
  官網(wǎng)教程：Vue中安裝element-ui

2.3 頁面與配置

2.3.1 配置

解決跨域問題：
Vue中解決跨域問題亲怠，請參照這篇文章：https://segmentfault.com/a/1190000011715088

• 1.config/index.js

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // modeify
    proxyTable: {
      //modify
      '/api/**': {
        target: 'http://127.0.0.1:8089',//設(shè)置你調(diào)用的接口域名和端口號(hào) 別忘了加http
        changeOrigin: true,//這裡true表示實(shí)現(xiàn)跨域
        pathRewrite: {
          '^/api': '/'//這里理解成用‘/api’代替target里面的地址，后面組件中我們掉接口時(shí)直接用api代替 比如我要調(diào)用'http://40.00.100.100:3002/user/add'柠辞，直接寫‘/api/user/add’即可
        }
      }
    },

• 2.src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

Vue.use(ElementUI)

axios.defaults.baseURL = 'http://localhost:8089/api'
// 將API方法綁定到全局
Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2.3.2 頁面 table.vue

<template>
  <el-row>
    <el-col :span="24">
      <div class="grid-content">
        <el-container>
          <el-container>
            <!--導(dǎo)航部分-->
            <el-header>
              <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1">用戶信息列表</el-menu-item>
              </el-menu>
            </el-header>
            <!--表格-->
            <el-main>
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="ID" width="180"></el-table-column>
                <el-table-column prop="username" label="姓名" width="180"></el-table-column>
                <el-table-column prop="sex" label="性別"></el-table-column>
                <el-table-column prop="birthday" label="生日"></el-table-column>
                <el-table-column prop="address" label="家庭住址"></el-table-column>
                <el-table-column prop="password" label="密碼"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      @click="editUser(scope.$index, scope.row)">編輯
                    </el-button>
                    <el-button
                      type="danger"
                      @click="deleteUser(scope.$index, scope.row)" icon="el-icon-delete">刪除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-main>
            <el-footer>
              <el-row>
                <el-button type="primary" @click="centerDialogVisible = true">添加</el-button>
              </el-row>
            </el-footer>
          </el-container>
        </el-container>
      </div>
      <!--      添加用戶-->
      <el-dialog title="添加用戶" :visible.sync="centerDialogVisible" :center="true" width="50%">
        <el-form :model="form">
          <el-form-item label="姓名:" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" type="text"></el-input>
          </el-form-item>
          <el-form-item label="生日:" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.birthday"
            type="date"
            placeholder="請選擇你的生日">
          </el-date-picker>
          </el-form-item>
          <el-form-item label="性別:" :label-width="formLabelWidth">
            <el-select v-model="form.sex" placeholder="性別">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="家庭住址:" :label-width="formLabelWidth">
            <el-input v-model="form.address" autocomplete="off" type="text"></el-input>
          </el-form-item>
          <el-form-item label="密碼:" :label-width="formLabelWidth">
            <el-input v-model="form.password" autocomplete="off" type="password"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" :center="true">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUser()">確 定</el-button>
        </div>
      </el-dialog>
      <!--      修改用戶-->
      <el-dialog title="修改用戶" :visible.sync="editformDialogVisible" :center="true" width="50%">
        <el-form :model="editform">
          <el-input v-model="editform.id" autocomplete="off" type="hidden" ></el-input>
          <el-form-item label="姓名:" :label-width="formLabelWidth">
            <el-input v-model="editform.name" autocomplete="off" type="text"></el-input>
          </el-form-item>
          <el-form-item label="性別:" :label-width="formLabelWidth">
            <el-select v-model="editform.sex" placeholder="性別">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生日:" :label-width="formLabelWidth">
          <el-date-picker
            v-model="editform.birthday"
            type="date"
            placeholder="請選擇你的生日">
          </el-date-picker>
          </el-form-item>
          <el-form-item label="家庭住址:" :label-width="formLabelWidth">
            <el-input v-model="editform.address" autocomplete="off" type="text"></el-input>
          </el-form-item>
          <el-form-item label="密碼:" :label-width="formLabelWidth">
            <el-input v-model="editform.password" autocomplete="off" type="password"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" :center="true">
          <el-button @click="editformDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateUser()">確 定</el-button>
        </div>
      </el-dialog>
    </el-col>
  </el-row>
</template>
<script>
  export default {
    data () {
      return {
        activeIndex: '1',
        // 表格內(nèi)容
        tableData: [],
        centerDialogVisible: false,
        editformDialogVisible: false,
        //添加表單
        form: {
          name: '',
          sex: '',
          address: '',
          password: '',
          birthday:''
        },
        //修改表單
        editform: {
          id:'',
          name: '',
          sex: '',
          address: '',
          password: '',
          birthday:''
        },
        formLabelWidth: '80px'
      }
    },
    methods: {
      //添加用戶
      addUser () {
        var _this = this
        _this.centerDialogVisible = false
        if (_this.form.name == '') {
          alert('姓名不能為空')
          return
        }
        if (_this.form.sex == '') {
          alert('請選擇你的性別')
          return
        }
        if (_this.form.birthday == '') {
          alert('請選擇你的生日')
          return
        }
        if (_this.form.address == '') {
          alert('請?zhí)顚懩愕募彝プ≈?)
          return
        }
        if (_this.form.password == '') {
          alert('密碼不能為空')
          return
        }
        let user = JSON.stringify({
          username: _this.form.name,
          sex: _this.form.sex,
          address: _this.form.address,
          password: _this.form.password,
          birthday:_this.form.birthday
        })
        _this.$axios.post('/api/user/insertUser', user, {
          headers: {
            'Content-Type': 'application/json;charset=utf-8'  //頭部信息
          }
        }).then(res => {
            if (res.data == 1) {
              _this.$message({
                message: '添加成功',
                type: 'success'
              })
              //刷新頁面
              this.getData()
            }
          }
        ).catch(error => {
          _this.$message.error('添加失敗团秽，服務(wù)其內(nèi)部錯(cuò)誤')
        })
      },
      //修改用戶彈窗 賦值操作
      editUser (index, row) {
        var _this = this;
        _this.editformDialogVisible=true;
        _this.editform.id = row.id;
        _this.editform.name = row.username;
        _this.editform.sex = row.sex;
        _this.editform.address = row.address;
        _this.editform.password = row.password;
        _this.editform.birthday = row.birthday;
      },
      //修改用戶
      updateUser(){
        var _this = this;
        _this.editformDialogVisible=false;
        if (_this.editform.name == '') {
          alert('姓名不能為空')
          return
        }
        if (_this.editform.sex == '') {
          alert('請選擇你的性別')
          return
        }
        if (_this.editform.birthday == '') {
          alert('請選擇你的生日')
          return
        }
        if (_this.editform.address == '') {
          alert('請?zhí)顚懩愕募彝プ≈?)
          return
        }
        if (_this.editform.password == '') {
          alert('密碼不能為空')
          return
        }
        let user = JSON.stringify({
          id:_this.editform.id,
          username: _this.editform.name,
          sex: _this.editform.sex,
          address: _this.editform.address,
          password: _this.editform.password,
          birthday:_this.editform.birthday
        })
        _this.$axios.post('/user/updateUser', user, {
          headers: {
            'Content-Type': 'application/json;charset=utf-8'  //頭部信息
          }
        }).then(res => {
            if (res.data == 1) {
              _this.$message({
                message: '修改成功',
                type: 'success'
              })
              //刷新頁面
              this.getData()
            }
          }
        ).catch(error => {
          _this.$message.error('修改失敗，服務(wù)其內(nèi)部錯(cuò)誤')
          console.log(error)
        })

      },
      //刪除用戶
      deleteUser (index, row) {
        // index 表示當(dāng)前所在行的行號(hào)
        // row  表示當(dāng)前所在行的數(shù)據(jù)
        this.$confirm('是否刪除該用戶叭首？', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var _this = this
          _this.$axios.get('/user/deleteUserById', {
            params: {
              id: row.id
            }
          }).then(res => {
              if (res.data == 1) {
                _this.$message({
                  message: '刪除成功',
                  type: 'success'
                })
                //刷新頁面
                this.getData()
              }
            }
          ).catch(error => {
            _this.$message.error('刪除失敗徙垫，服務(wù)其內(nèi)部錯(cuò)誤')
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          });
        });
      },
      getData () {
        var _this = this
        _this.$axios.get('/user/quertUser', {
            params: {
              offset: 0,
              limit: 10
            }
          }
        ).then(res => {
            this.tableData = res.data
          }
        ).catch(error => {
          console.log(error)
        })
      }
    },
    mounted () {         //mounted：渲染HTML成功后調(diào) 用getData方法讀取商品數(shù)據(jù)，getBrandsData讀取品牌數(shù)據(jù)
      this.getData()
    }
  }
</script>
<style scoped>
</style>

3放棒、測試

• 用戶列表

  
  
  用戶列表展示.png

• 添加用戶.

  
  
  添加用戶.png

• 修改用戶.

  
  
  修改用戶.png

• 刪除用戶

  
  
  刪除用戶.png

• 刪除成功

  
  
  刪除成功.png