项目技术栈
vue-cli + express + mysql
基础准备:
- MYSQL安装详细教程
搜索文章: 2022 年 MySQL 8.0 安装配置 最简易(保姆级)
作者: Northern Crescent
- 创建数据表
搜索文章: Navicat for MySQL 连接数据库、管理用户、创建数据库和表
作者: 菜鸟飞一般的感觉
- 创建项目
vue create <项目名>
npm install axios express mysql body-parser --save (可分开安装)
前端部分:
概述:这部分主要做的是配置封装axios请求,解决跨域
- 在src同级下创建
util
文件夹,再创建request.js
文件; - 在
package.json
同级下创建.env.development
文件,在其中写入VUE_APP_BASE_API="<你的base api>"
解释:util文件存放公共方法文件, request是对axios的封装文件
/*
* @Description: axios 全局请求(这个模块自定义的意义不大)
*/
import axios from 'axios'
const Axios = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 30000,
withCredentials: false, //表示跨域请求时是否需要使用凭证
})
// 请求拦截器
Axios.interceptors.request.use(
config => {
config.headers['Content-Type'] = 'application/json';
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截器
Axios.interceptors.response.use(
response => {
const res = response.data.code ? response.data : response
if (res.code !== 200 && res.code) {
return Promise.reject(response.data)
}
return res
},
error => {
if (error.response) {
return Promise.reject(error)
} else if (error.request) {
return Promise.reject(error)
} else {
return Promise.reject(error)
}
}
)
export default Axios
- 在
src
下创建api
文件夹,如下:
解释:api文件夹下存放各个模块文件夹,模块文件夹中存放接口文件
import request from "../../util/request"
/**
* @description: /user/getInfo (接口根据需求自定义)
*/
export function getInfo() {
return request({
url: '/api/user/getUser',
method: 'get'
})
}
- 在根目录下创建
vue.config.js
文件
解释: 为了配置代理
//根据需求自定义
module.exports = {
/** 区分打包环境与开发环境
* process.env.NODE_ENV==='production' (打包环境)
* process.env.NODE_ENV==='development' (开发环境)
* baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai/front/":'front/',
*/
// 项目部署的基础路径
// 我们默认假设你的应用将会部署在域名的根部,
// 例如 https://www.my-app/
// 如果你的应用部署在一个子路径下,那么你需要在这里
// 指定子路径。比如将你的应用部署在
// https://www.foobar/my-app/
// 那么将这个值改为 '/my-app/'
publicPath: "/", // 构建好的文件输出到哪里
outputDir: "dist", // where to put static assets (js/css/img/font/...) // 是否在保存时使用‘eslint-loader’进行检查 // 有效值: true | false | 'error' // 当设置为‘error’时,检查出的错误会触发编译失败
lintOnSave: true, // 使用带有浏览器内编译器的完整构建版本 // https://vuejs/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
runtimeCompiler: false, // babel-loader默认会跳过`node_modules`依赖. // 通过这个选项可以显示转译一个依赖
transpileDependencies: [
/* string or regex */
], // 是否为生产环境构建生成sourceMap?
productionSourceMap: false, // 调整内部的webpack配置. // see https://github/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {}, // CSS 相关选项
css: {
// 将组件内部的css提取到一个单独的css文件(只用在生产环境)
// 也可以是传递给 extract-text-webpack-plugin 的选项对象
extract: true, // 允许生成 CSS source maps?
sourceMap: false, // pass custom options to pre-processor loaders. e.g. to pass options to // sass-loader, use { sass: { ... } }
loaderOptions: {}, // Enable CSS modules for all css / pre-processor files. // This option does not affect *.vue files.
}, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores
parallel: require("os").cpus().length > 1, // PWA 插件相关配置 // see https://github/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {}, // configure webpack-dev-server behavior
devServer: {
disableHostCheck: false,
host: "0.0.0.0",
port: 8088,
https: false,
hotOnly: false, // See https://github/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
proxy: {
'/api': {
target: 'http://localhost:3000/', //3000是服务器端口
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
} // string | Object
// before: app => {}
}, // 第三方插件配置
pluginOptions: {
// ...
}
};
后端部分
概述: 创建后端接口,配置本地服务,连接数据库
- 在
src
文件夹同级下创建server
文件夹,再创建api
文件夹、db.js
文件以及index.js
文件,如下:
解释: api文件夹下存放的是各个模块后端接口,db.js存放的是数据库信息, index.js存放的是后端服务
index.js
文件内容:
// node 后端服务器 (api部分可以根据需求自定义)
const express = require('express');
const bodyParser = require('body-parser');
// 引入模块api
const userApi = require('./api/user');
const pageApi = require('./api/page');
const app = express();
// 解决跨域问题
app.all('*', function(req, res, next) {
// 设置允许跨域的域名,*代表允许任意域名跨域
res.header('Access-Control-Allow-Origin', '*');
// 允许的header类型
res.header('Access-Control-Allow-Headers', 'content-type');
// 跨域允许的请求方式
res.header('Access-Control-Allow-Methods', 'DELETE,PUT,POST,GET,OPTIONS');
if (req.method.toLowerCase() === 'options') {
res.send(200); // 让options尝试请求快速结束
} else {
next();
}
});
app.use(bodyParser.json()); // 以json格式返回出去
app.use(bodyParser.urlencoded({ extended: false }));
// 后端api路由
app.use('/user', userApi);
app.use('/page', pageApi);
// 监听端口
app.listen(3000);
console.log('success listen at port:3000......');
db.js
文件内容:
// 数据库连接配置 (根据实际填写信息)
module.exports = {
mysql: {
host: '<主机名或ID地址>', //新建数据库连接时的 主机名或ID地址 内容
user: '<用户名>', //用户名
password: '<密码>', //密码
database: '<数据库名>', //数据库名
port: '<端口号>' //端口号
}
}
api
文件夹下的模块文件user.js
:
// api 实例
var express = require('express');
var mysql = require('mysql');
var models = require('../db');
var router = express.Router();
// 连接数据库
var db = mysql.createConnection(models.mysql);
db.connect();
var callbackResult = (res, result, err) => {
if (err) {
res.send({
code: 500,
msg: err.sqlMessage
})
};
if (result) {
res.send({
code: 200,
data: result
})
}
};
//---------------------------以下部分根据需求自定义------------------------------
let sqlMap_user = { // sql语句
// ? 占位符 后面给数据自动填充
add: 'insert into userinfo(id, name, password) values(?,?,?)',
get: "select * from userinfo where name =?",
};
// 增加用户接口
// POST 请求
router.post('/addUser', (req, res) => {
var params = req.body;
db.query(sqlMap_user.add, [params.id, params.name, params.password], (err, result) => {
callbackResult(res, result, err);
});
});
// 获取用户信息接口
// GET 请求
router.get('/getUser', (req, res) => {
let params = req.query;
db.query(sqlMap_user.get, [params.name], (err, result) => {
callbackResult(res, result, err);
});
});
module.exports = router;
启动项目
- 在 server文件夹下
node index.js
- 在项目文件下根据配置
npm run dev/serve
更多推荐
VUE+EXPRESS+MYSQL 项目的整体构建
发布评论