VUE+EXPRESS+MYSQL 项目的整体构建

项目技术栈

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.com/front/":'front/',
     */
    // 项目部署的基础路径
    // 我们默认假设你的应用将会部署在域名的根部,
    // 例如 https://www.my-app.com/
    // 如果你的应用部署在一个子路径下,那么你需要在这里
    // 指定子路径。比如将你的应用部署在
    // https://www.foobar.com/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.org/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.com/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.com/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.com/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
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要下载Vue Node.js MySQL项目,您需要按照以下步骤进行操作: 1. 首先,确保您已经安装了Node.js和MySQL数据库。如果没有,请前往它们的官方网站并按照说明进行安装。 2. 打开您的命令行终端,创建一个新的项目文件夹。您可以使用以下命令创建一个名为"my-project"的文件夹: ``` mkdir my-project ``` 3. 进入新创建的项目文件夹: ``` cd my-project ``` 4. 使用以下命令初始化一个新的Node.js项目: ``` npm init -y ``` 这将会自动生成一个默认的`package.json`文件。 5. 安装Vue.js。使用以下命令将Vue.js添加到您的项目中: ``` npm install vue ``` 6. 安装Express框架,用于构建服务器端应用。使用以下命令将Express添加到您的项目中: ``` npm install express ``` 7. 安装mysql模块,用于连接和操作MySQL数据库。使用以下命令将mysql模块添加到您的项目中: ``` npm install mysql ``` 8. 创建一个新的JavaScript文件,例如`app.js`,并打开它。 9. 在`app.js`中编写您的服务器端代码,包括Vue.js的前端代码和与MySQL数据库的交互。您可以根据您的项目需求编写自定义的代码。 10. 保存`app.js`文件并返回终端。 11. 在终端中运行以下命令以启动服务器: ``` node app.js ``` 12. 当服务器启动成功后,您将看到一个成功的消息。此时,您可以在浏览器中访问`http://localhost:3000`来查看您的Vue Node.js MySQL项目。 总结一下,下载Vue Node.js MySQL项目的步骤包括:创建项目文件夹,初始化Node.js项目,安装Vue.jsExpressmysql模块,编写服务器端代码,启动服务器并在浏览器中查看项目。这样,您就可以成功下载和运行Vue Node.js MySQL项目了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值