vue3 + uni-app + mysql打造景德镇特色浏览网站（小程序版）

2023-02-22 04:14:10

如何使用Vue3 + Uni-app + MySQL构建景德镇特色浏览小程序

初始化项目

用Vue3-cli创建一个新项目：

vue create vue3-uni-app-project

安装Uni-app

安装Uni-app，这是将Vue3用于跨平台移动开发的框架：

npm install @dcloudio/uni-app -D

配置Uni-app

在package.json中添加Uni-app配置：

{
  "uni-app": {
    "router": {
      "mode": "history"
    },
    "compile": {
      "exclude": [
        "**/node_modules/** "
      ]
    }
  }
}

创建Vue3页面

在src目录下创建新的Vue3页面：

vue add component PageName

编写Vue3代码

在创建的页面中编写Vue3代码，例如：

<template>
  <div id="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

连接MySQL数据库

安装mysql库：

npm install mysql

创建一个db.js文件，连接到数据库：

const mysql = require('mysql');

const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'vue3_uni_app_project'
});

db.connect();

module.exports = db;

使用Koa开发后端

安装Koa框架：

npm install koa

创建一个server.js文件，编写后端代码：

const koa = require('koa');
const app = new koa();

app.use(async (ctx, next) => {
  const db = require('./db');

  const sql = 'SELECT * FROM users';

  const users = await db.query(sql);

  ctx.body = users;

  await next();
});

app.listen(3000);