1.购买服务器和域名
我的服务器和域名是都在腾讯云买的
服务器选的是轻量级的 Windows Server 的操作系统
2.备案
如果买的是国内的服务器需要备案，备案需要审核半个月左右，只要填写一些基本信息，然后等待管局审核通过即可
3.然后就可以通过远程桌面直接访问你的服务器了
4.通过服务器管理功能进行一些简单的配置就可以使用了
5.然后使用iis配置服务器，不会iis的百度一下，在服务器安装mysql环境和可视化工具，还有node环境，然后就可以先在自己本机的电脑进行操作了，到时候代码写好了直接给复制到服务器上就可以了。
6. 然后开始使用node js来搭建一个本地的服务，让前端来进行访问。
先来创建一个mysql.js的文件，来连接mysql数据库，直接上代码。
let mysql = require('mysql')
const db_config = {
host: 'localhost',
user: 'root',
password: '122500',
port: "3306",// 默认使用3306端口号
database: 'biuder'
}
// 进行数据库交互
function conMysql(sql) {
let connect = mysql.createConnection(db_config)
// 开始链接数据库
connect.connect(function (err) {
if (err) {
console.log(`mysql连接失败: ${err}!`)
} else {
console.log('mysql连接成功!')
}
})
// 返回一个Promise承诺对象
return new Promise((resolve, reject) => {
connect.query(sql, (err, result) => {
if (err) {
reject(err)
} else {
// 此处需要将返回数据转为JSON再转回来,否则原数据不为任何数据类型
let res = JSON.parse(JSON.stringify(result))
closeMysql(connect)
resolve(res)
}
});
})
}
// 查询成功后关闭mysql
function closeMysql(connect) {
connect.end((err) => {
if (err) {
console.log(`mysql关闭失败:${err}!`)
} else {
console.log('mysql关闭成功!')
}
})
}
// 导出方法
exports.conMysql = conMysql
连接上mysql后创建一个app.js的文件
const express = require('express')
let { conMysql } = require('./mysql')
const app = express()
const cors = require('cors')
app.use(cors())
const bodyParser = require('body-parser')
const multiparty = require('connect-multiparty')
app.use(bodyParser.urlencoded({
extended:true
}));
app.use(bodyParser.json())
app.use(multiparty())
// 启动
app.listen(4000, () => {
console.log('express server running at http://127.0.0.1:' + 4000);
})
app.get('/getUser', (req, res) => {
let sql = 'select * from biu'
conMysql(sql).then(result => {
res.send(result)
})
})
class Response {
constructor(isSucceed, msg, code, data) {
this.isSucceed = isSucceed;
this.msg = msg;
this.code = code;
this.data = data;
}
}然后在终端输入 node app.js 来测试是否连接成功
具体这个文件夹目录如下
需要的依赖
登录功能
// 登录
app.post('/login', (req, res) => {
let sql = `select * from biu where username = '${req.body.username}'`
conMysql(sql).then(result => {
if (result[0].password === req.body.password) {
let response = new Response(true, '登录成功', 200, result)
res.send(response)
} else {
let response = new Response(false, '用户名或密码错误', 400)
res.status(400).send(response)
}
}).catch(err => {
res.status(500).send('数据库连接出错!')
})
})
注册功能
// 注册
app.post('/addUser', (req, res) => {
let { username, password,biuname} = req.body
let sql = `insert into biu(username, password,biuname) values('${username}', '${password}', '${biuname}')`
conMysql(sql).then(result => {
if(result.affectedRows == 1){
let response = new Response(true, '注册成功', 200, result)
res.send(response)
} else{
let response = new Response(false, '注册失败,请联系开发者解决')
res.status(400).send(response)
}
}).catch(err => {
res.status(500).send('数据库连接出错!')
})
})修改密码功能
// 修改密码
app.post('/updatePassword', (req, res) => {
let sql = `update biu set password = '${req.body.newPassword}' where username = '${req.body.username}'`
conMysql(sql).then(result => {
if (result.affectedRows == 1) {
let response = new Response(true, '修改成功', 200, result)
res.send(response)
} else {
let response = new Response(false, '修改失败,请联系开发者解决')
res.status(400).send(response)
}
}).catch(err => {
res.status(500).send('数据库连接出错!')
})
})
后台代码就完事了 ，接下来就是前端来进行请求数据
新建文件夹 创建vue项目
具体下载的依赖如下
main.js配置
import { createApp } from 'vue'
import './style.css'
import './phone.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import axios from 'axios';
import VueAxios from 'vue-axios';
import loginLogic from './js/loginlogic'
const app = createApp(App)
app.use(ElementPlus, {
locale: zhCn,
})
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(router)
app.use(VueAxios, axios)
app.config.globalProperties.loginLogic = loginLogic;
// app.config.globalProperties.baseURL = "http://127.0.0.1:4000"; // 本地
app.config.globalProperties.baseURL = "http://你自己服务器的ip:服务器的端口"; // 服务器
const proxy = app.mount("#app")
export default proxy登录页的关键代码
登录
login(){
if (this.userLoginForm.verifyNum === "") {
this.$message({
message: '大哥填验证码啊😓',
type: 'warning'
});
} else if (this.userLoginForm.verifyNum !== this.loginLogic.identCode) {
this.$message.error('验证码填错了，重填去😓');
} else {
if(this.userLoginForm.username != '' && this.userLoginForm.password != ''){
this.axios.post( this.baseURL + '/login', this.userLoginForm).then((res) => {
this.$message({
message: res.data.msg,
type: 'success'
});
this.$router.push("/Index");
})
.catch((err) => {
this.$message.error('账号或密码填错了，重填去😓');
})
} else {
this.$message({
message: '不填账号密码拿啥登录呢？？？😡😡',
type: 'warning'
});
}
}
},注册
zclogin(){
if(this.userLoginformzc.username != '' && this.userLoginformzc.password != '' &&
this.userLoginformzc.biuname != '') {
this.axios.post(this.baseURL + '/addUser', this.userLoginformzc).then(res => {
this.$message({
message: res.data.msg,
type: 'success'
});
this.logindl = true
this.loginzc = false
})
.catch((err) => {
this.$message.error(err.response.data.msg);
})
}else{
this.$message({
message: '请输入账号密码昵称',
type: 'warning'
});
}
},完成后的效果 做了部分机型的兼容处理
登录 pc端
手机端
注册也用什么区别
登录成功后跳转至首页，目前这个东西只做到这里了，备案后一定要把备案号给整在网页底部，不然管局审核会给你把网站暂时封掉。开发完成后只要把你本地的ip换成你服务器的地址，然后将代码文件都放到服务器就可以了，还有mysql数据库的sql文件。
线上地址：
http://biu.nn1225.club/
8552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
