vue3+ts+node个人博客系统（一）

一、搭建项目

二、搭建node后端

（1）下载安装需要的插件
下载express

npm install express

下载cors，用于处理接口跨域问题

npm install cors

下载mysql

npm install mysql

下载axios

npm install axios

（2）在项目中创建server文件夹，用于搭建本地服务器

a:新建/server/app.js，用于配置服务器相关信息

let express = require('express')
let app = express()
let cors = require('cors')
let bodyParser = require('body-parser')

app.use(bodyParser.json());  //配置解析，用于解析json和urlencoded格式的数据
app.use(bodyParser.urlencoded({extended: false}));
app.use(cors())              //配置跨域，必须在路由之前

//这里的80可以按实际情况去改
app.listen(80, () => {
    console.log('服务器启动成功');
})

b:新建/server/db/index.js，用于配置数据库相关信息

let mysql = require('mysql')

let db = mysql.createPool({
    host: '127.0.0.1',     //数据库IP地址
    user: 'root',          //数据库登录账号
    password: '123',      //数据库登录密码
    database: 'myststem'       //要操作的数据库
})

module.exports = db

c:新建/server/API/user.js，用于操作数据库

let db = require('../db/index')

exports.get = (req, res) => {
    var sql = 'select * from user'
    db.query(sql, (err, data) => {
        if(err) {
            return res.send('错误：' + err.message)
        }
        res.send(data)
    })
}

d:新建/server/router.js，用于配置对应路由

let express = require('express')
let router = express.Router()
let user = require('./API/user')

router.get('/user', user.get)

module.exports = router

e:在/server/app.js中导入路由配置

let express = require('express')
let app = express()
let cors = require('cors')
let bodyParser = require('body-parser')
let router = require('./router')

app.use(bodyParser.json());  //配置解析，用于解析json和urlencoded格式的数据
app.use(bodyParser.urlencoded({extended: false}));
app.use(cors())              //配置跨域
app.use(router)              //配置路由

app.listen(80, () => {
    console.log('服务器启动成功');
})

f：测试服务器是否搭建成功

进入server文件夹下执行node app.js
提示“服务器启动成功”，浏览器打开http://127.0.0.1/user(前提先在mysql里面建相应的表，可看见user数据表中对应的数据，表示服务器搭建成功。

 

 （3）项目访问接口获取数据

<template>
  <router-view></router-view>
</template>

<script>
import axios from "axios"
import { onMounted } from "vue"
export default {
  name: "App",

  setup() {
    onMounted(() => {
      axios
        .get("http://127.0.0.1:83/user")
        .then((res) => {
          console.log(res.data)
        })
        .catch((err) => {
          console.log("获取数据失败" + err)
        })
    })
  }
}
</script>

<style></style>

 

 三、修改App.vue以及路由跳转

（1）删除原本创建项目的helloworld文件，修改App.vue

（2）创建新的文件夹login

（3）创建新的router文件夹

import { createRouter, createWebHashHistory } from 'vue-router'
import { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: () => import('../views/login/login.vue')
  }
]
const router = createRouter({
  routes,
  history: createWebHashHistory()
})

export default router

四、启动项目

npm run serve