const express = require('express');
const router = express.Router();
const mysql = require('mysql');
const connection = mysql.createConnection({
host: '192.168.0.38', //数据库地址
user: '******', //用户
password: '******', //密码
database: 'lj', //库名
connection.connect();
//设置跨域访问
router.all('*', function(req, res, next){
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1');
res.header("Content-Type", "application/json;charset=utf-8");
next();
//获取数据接口
router.get('/getData',(req,res) => {
connection.query(`SELECT * FROM test`, (err, data) => {
if (err) {
res.status(500).send('err').end();
}else{
res.json(data);
module.exports = router;
2.1数据库如下
3.创建一个html
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>test</title>
</head>
<script src="./jquery-1.9.1.min.js"></script>
<script>
$.ajax({
type: 'get',
url: 'http://127.0.0.1:3000/api/getData',
success: function (data) {
console.log(data);
</script>
</body>
</html>
1. app.jsconst express = require('express');const app = express();app.listen(3000);//路由配置const apiRouter = require('./routes/api');app.use('/api', apiRouter);2. api.jsconst express = re...
刚开始学node，今天做这个也是累死宝宝了，以后可以自己写接口自己用了，再也不用麻烦人家后端人员了，这些年我们欠他们的太多了，说多了都是泪，不多说，往下看吧。。。
服务端项目目录下：
1、npm init 创建package.json文件；
2、创建一个app.js文件，下面的标注都有了，简单的写了一个接口，下面会用，对跨域访问做了设置
var express=require('expr...
//设置跨域请求头 一个中间件设置跨域 主要是Access-Control-Allow-Origin字段 允许的访问源
app.all('*', function (req, res, next) {
res.hea...
前后端分离，经常会出现跨域访问被限制的问题。
跨域访问限制是服务端出于安全考虑的限制行为。即只有同域或者指定域的请求，才能访问。这样还可以防止图片被盗链。服务端（比如 Node.js）可以通过代理，来解决这一问题。
1 安装 request 库
npm install request --save-dev
我们以知乎日报为例，配置两个代理。一个代理内容，另一个代理图片。
在项目根目录...
首先，Vue3 是一种 JavaScript 框架，用于构建Web应用程序的前端。它可以与后端 API 集成，以实现登录和注册功能。在这里，我将介绍如何使用Vue3和Node.js创建一个简单的登录和注册系统。
首先，我们需要创建一个Vue3项目。可以使用Vue CLI来创建一个新项目。在命令行中输入以下命令：
vue create my-project
这将创建一个新的Vue3项目。接下来，我们需要安装一些依赖项。在项目的根目录下运行以下命令：
npm install axios vue-router
`axios` 是一个用于发送 HTTP 请求的库，`vue-router` 是Vue3中用于路由的官方库。
接下来，我们需要创建一个后端API。我们将使用Node.js和Express框架来创建API。创建一个新的文件夹，并使用以下命令初始化一个新的Node.js项目：
npm init
接下来，我们需要安装一些依赖项。在项目的根目录下运行以下命令：
npm install express body-parser cors bcrypt jsonwebtoken
这些依赖项分别是：
- `express`：用于创建API的框架。
- `body-parser`：用于解析 HTTP 请求体的库。
- `cors`：用于解决浏览器跨域问题的库。
- `bcrypt`：用于密码哈希的库。
- `jsonwebtoken`：用于生成和验证 JSON Web Tokens 的库。
接下来，我们需要创建一个 `server.js` 文件，并在其中编写我们的API。
首先，我们需要引入我们的依赖项：
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');
然后，我们需要创建一个新的Express应用程序，并使用中间件来解析HTTP请求体和处理跨域请求：
```javascript
const app = express();
app.use(bodyParser.json());
app.use(cors());
接着，我们需要定义一些路由来处理用户注册和登录请求。我们将使用一个内存中的数组来保存已注册的用户信息。在实际应用中，应该将这些信息保存在数据库中。
```javascript
const users = [];
app.post('/register', (req, res) => {
const { username, password } = req.body;
// Check if user already exists
const userExists = users.find(user => user.username === username);
if (userExists) {
return res.status(400).json({ message: 'User already exists' });
// Hash the password
const hashedPassword = bcrypt.hashSync(password, 10);
// Add the user to the array
const newUser = {
username,
password: hashedPassword
users.push(newUser);
res.status(201).json({ message: 'User created successfully' });
app.post('/login', (req, res) => {
const { username, password } = req.body;
// Find the user by username
const user = users.find(user => user.username === username);
if (!user) {
return res.status(401).json({ message: 'Invalid username or password' });
// Check the password
const passwordMatch = bcrypt.compareSync(password, user.password);
if (!passwordMatch) {
return res.status(401).json({ message: 'Invalid username or password' });
// Generate a JWT token
const token = jwt.sign({ username }, 'my-secret-key');
res.status(200).json({ token });
这些路由分别用于处理用户注册和登录请求。当用户注册时，我们将检查该用户是否已经存在。如果不存在，我们将对其密码进行哈希，并将其添加到用户数组中。当用户登录时，我们将检查提供的用户名和密码是否匹配，并生成一个 JSON Web Token 来表示该用户已经登录成功。
最后，我们需要启动我们的应用程序。在 `server.js` 文件底部添加以下代码：
```javascript
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server started on port ${PORT}`);
现在，我们已经创建了一个具有简单注册和登录功能的API。接下来，我们需要在Vue3应用程序中使用这些API。
在Vue3应用程序中，我们可以使用 `axios` 库来发送 HTTP 请求。我们需要创建一个 `AuthService` 来处理与后端的通信。
在项目的根目录下创建一个新的文件夹 `services`，并在其中创建一个新的文件 `auth.js`：
```javascript
import axios from 'axios';
const API_URL = 'http://localhost:3000';
class AuthService {
register(username, password) {
return axios.post(`${API_URL}/register`, {
username,
password
login(username, password) {
return axios.post(`${API_URL}/login`, {
username,
password
export default new AuthService();
这个 `AuthService` 类定义了两个方法：`register` 和 `login`。这些方法分别用于向我们的后端 API 发送注册和登录请求。
现在，我们可以在Vue3组件中使用这些方法来处理用户注册和登录。例如，在登录页面中，我们可以编写以下代码：
```html
<template>
<h1>Login</h1>
<form @submit.prevent="login">
<label>
Username:
<input type="text" v-model="username" />
</label>
<label>
Password:
<input type="password" v-model="password" />
</label>
<button type="submit">Login</button>
</form>
</template>
<script>
import AuthService from '@/services/auth';
export default {
data() {
return {
username: '',
password: ''
methods: {
async login() {
try {
const response = await AuthService.login(this.username, this.password);
localStorage.setItem('token', response.data.token);
this.$router.push('/');
} catch (error) {
console.error(error);
</script>
在这个组件中，我们使用 `AuthService` 来处理用户登录请求。当用户提交表单时，我们将调用 `login` 方法来发送 HTTP 请求。如果请求成功，我们将得到一个包含 JWT token 的响应，并将其存储在本地存储中。然后，我们将使用Vue3的路由功能将用户重定向到主页。如果请求失败，我们将在控制台上输出错误信息。
类似地，我们可以编写一个用于处理用户注册请求的组件。在这个组件中，我们将使用 `AuthService` 的 `register` 方法来发送 HTTP 请求。
这就是如何使用Vue3和Node.js创建一个简单的登录和注册系统。当然，这只是一个基本示例，实际应用中需要更多的安全考虑和验证。
