egg+vue+mysql 简单实现增删查改功能

一、安装vue与eggvue create web-appnpm init egg --type=simple --registry https://registry.npm.taobao.org生成目录如下server-app存放的是egg框架web-app存放的是vue框架二、插件安装与配置web-appnpm i axiosnpm i vue-routernpm i element-uinp

J-Rainbow

3426人浏览 · 2022-01-27 16:36:48

J-Rainbow · 2022-01-27 16:36:48 发布

一、安装vue与egg

vue create web-app
npm init egg --type=simple --registry https://registry.npm.taobao.org

生成目录如下
在这里插入图片描述
server-app存放的是egg框架
web-app存放的是vue框架

二、插件安装与配置

web-app

cd web-app
npm i axios
npm i vue-router
npm i element-ui 
npm i less

axios配置（配置network下的api.js与config.js）
在这里插入图片描述
api.js (存放的是前端连接后端的方法)

import axios from 'axios'

export default {
    getList: (data) => axios.get('/api/getList', data),
    addList: (data) => axios.post('/api/addList', data),
    updataList: (data) => axios.post('/api/updataList', data),
    deleteList: (data) => axios.post('/api/deleteList', data),
}

config.js （封装的axios）

import axios from "axios";
axios.defaults.timeout = 5000; //超时时间设置
axios.defaults.withCredentials = true; //true允许跨域
//Content-Type 响应头
axios.defaults.headers.post["Content-Type"] =
    "application/x-www-form-urlencoded;charset=UTF-8";
let token = localStorage.getItem('authorization');
axios.defaults.headers.post["authorization"] = token;
if (process.env.NODE_ENV === "production") {
    /*第二层if，根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/
    if (process.env.VUE_APP_FLAG === "pro") {
        //production 生产环境
        axios.defaults.baseURL = "http://127.0.0.1:7002"; //根据本机的egg运行的路径设置
    } else {
        //test 测试环境
        axios.defaults.baseURL = "";
    }
} else {
    //dev 开发环境
    axios.defaults.baseURL = "http://127.0.0.1:7002";//根据本机的egg运行的路径设置
}

// 响应拦截器
axios.interceptors.response.use(
    response => {
        // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
        // 否则的话抛出错误
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    // 服务器状态码不是2开头的的情况
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                // 401: 未登录
                case 401:
                    router.replace({
                        path: "/login",
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    });
                    break;
                case 403:
                    this.$message("管理员权限已修改请重新登录");
                   
                    setTimeout(() => {
                        router.replace({
                            path: "/login",
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                    }, 1000);
                    break;
                case 404:
                    this.$message("请求页面404");
                    break;
            }
            return Promise.reject(error.response);
        }
    }
);

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        axios
            .get(url, {
                params: params
            })
            .then(response => {
                resolve(response.data);
            })
            .catch(err => {
                reject(err);
            });
    });
}

/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, data).then(
            response => {
                resolve(response.data);
            },
            err => {
                reject(err);
            }
        );
    });
}

/**
 * 封装delete请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function deletes(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.delete(url, data).then(
            response => {
                resolve(response.data);
            },
            err => {
                reject(err);
            }
        );
    });
}

/**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.put(url, data).then(
            response => {
                resolve(response.data);
            },
            err => {
                reject(err);
            }
        );
    });
}

在main.js中引入

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import './network/config'
import api from './network/api'

Vue.use(ElementUI);
Vue.config.productionTip = false
Vue.prototype.$api = api //全局注入

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

view页面方法

   //删除
   async deleteList(id){
      const params = {};
      params["id"] = id;
      let { data } = await this.$api.deleteList(params);
      if (data.code !== 200) {
        return this.$message.error(data.data);
      }
      this.$message.success(data.data);
      await this.getList();
    },
    //修改
   async updataList(){
      let { data } = await this.$api.updataList(this.form);
      if (data.code !== 200) {
        return this.$message.error(data.data);
      }
      this.$message.success(data.data);
      this.dialogVisible = false
      await this.getList();
    },
    //修改得到当前id
    showEdit(item){
      this.dialogVisible = true
      this.form = JSON.parse(JSON.stringify(item))
    },
    //获取全部数据
    async getList() {
      let { data } = await this.$api.getList();
      this.list = data.data;
    },
    //增加
    async addList() {
      const params = {};
      params["username"] = this.username;
      params["email"] = this.email;
      params["message"] = this.message;
      let { data } = await this.$api.addList(params);
      if (data.code !== 200) {
        return this.$message.error(data.data);
      }
      this.$message.success(data.data);
      await this.getList();
    },

server-app

cd server-app
npm i egg-mysql
npm i egg-cors

在这里插入图片描述

plugin.js

'use strict';

/** @type Egg.EggPlugin */
module.exports = {
  // had enabled by egg
  // static: {
  //   enable: true,
  // }
  mysql: {
    enable: true,
    package: 'egg-mysql',
  },
  cors: {
    enable: true,
    package: 'egg-cors',
  },
};

config.default.js

/* eslint valid-jsdoc: "off" */

'use strict';

/**
 * @param {Egg.EggAppInfo} appInfo app info
 */
module.exports = appInfo => {
  /**
   * built-in config
   * @type {Egg.EggAppConfig}
   **/
  const config = exports = {};

  // use for cookie sign key, should change to your own and keep security
  config.keys = appInfo.name + '_1643251211068_3905';

  // add your middleware config here
  config.middleware = [];

  // add your user config here
  const userConfig = {
    // myAppName: 'egg',
  };

  config.mysql = {
    // 单数据库信息配置
    client: {
      // host
      host: 'localhost',
      // 端口号
      port: '3306',
      // 用户名
      user: '用户名',
      // 密码
      password: '密码',
      // 数据库名
      database: '数据库名',
    },
    // 是否加载到 app 上，默认开启
    app: true,
    // 是否加载到 agent 上，默认关闭
    agent: false,
  };
  config.security = {
    csrf: {
      enable: false,
      ignoreJSON: true,
    },
    domainWhiteList: [ 'http://localhost:8081' ], //前端服务路径
  };

  config.cors = {
    origin: 'http://localhost:8081',//前端服务路径
    credentials: true,//解决跨域问题
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS',
  };
  return {
    ...config,
    ...userConfig,
  };
};

router.js

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
  router.get('/api/getList', controller.indexController.getList);
  router.post('/api/addList', controller.indexController.addList);
  router.post('/api/updataList', controller.indexController.updataList);
  router.post('/api/deleteList', controller.indexController.deleteList);
};

indexController.js

'use strict';
const Controller = require('egg').Controller;
class indexController extends Controller {
  async getList() {
    const res = await this.ctx.service.indexService.getList();
    this.ctx.body = res;
  }
  async addList() {
    const params = this.ctx.request.body;
    const res = await this.ctx.service.indexService.addList(params);
    this.ctx.body = res;
  }
  async updataList() {
    const params = this.ctx.request.body;
    const res = await this.ctx.service.indexService.updataList(params);
    this.ctx.body = res;
  }
  async deleteList() {
    const params = this.ctx.request.body;
    const res = await this.ctx.service.indexService.deleteList(params);
    this.ctx.body = res;
  }
}
module.exports = indexController;

indexService.js

'use strict';
const Service = require('egg').Service;
class indexService extends Service {
  async getList() {
    const res = await this.app.mysql.select('表名');
    if (!res) {
      return {
        code: 400,
        data: [],
        msg: 'error',
      };
    }
    return {
      code: 200,
      data: res,
      msg: 'success',
    };
  }
  async addList(params) {
    const res = await this.app.mysql.insert('表名', {
      username: params.username,
      email: params.email,
      message: params.message,
      time: new Date(),
    });
    if (res.affectedRows !== 1) {
      return {
        code: 400,
        data: '创建失败',
      };
    }
    return {
      code: 200,
      data: '创建成功',
    };
  }
  async updataList(params) {
    const res = await this.app.mysql.update('表名', {
      id: params.id,
      username: params.username,
      email: params.email,
      message: params.message,
      time: new Date(),
    });
    if (res.affectedRows !== 1) {
      return {
        code: 400,
        data: '修改失败',
      };
    }
    return {
      code: 200,
      data: '修改成功',
    };
  }
  async deleteList(params) {
    const res = await this.app.mysql.delete('表名', {
      id: params.id,
    });
    if (res.affectedRows !== 1) {
      return {
        code: 400,
        data: '删除失败',
      };
    }
    return {
      code: 200,
      data: '删除成功',
    };
  }
}
module.exports = indexService;

三、mysql字段

在这里插入图片描述

四、启动项目

cd web-app
npm dev
cd server-app
npm serve

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^