【全栈之路】保姆级node+vue从0到1极速搭建(二)

本文涉及的产品
云数据库 RDS MySQL Serverless,0.5-2RCU 50GB
简介: 【全栈之路】保姆级node+vue从0到1极速搭建

3.sql语句-增删改查


3.1 删除数据:

delete  from 表名  where 删除条件
举例:
-- 删除id为14的同学
delete from stu where id=14
-- 删除的时候,不加条件,将删除stu表中的全部记录
delete from stu

3.2 修改数据

update 表名 set 字段1=值1, 字段2=值2,...  where 修改条件
举例
-- 修改id为1的同学的年龄为53
update stu set age=53 where id = 1
-- 修改id为1的同学的年龄为35,身高为160
update stu set age=35,height=160 where id = 1
-- 如果修改的时候,不加条件,则会修改全部的数据
update stu set weight = 60

3.3 数据查询

SELECT  字段名1, 字段名2, .....  FROM 表名  WHERE <条件表达式>
举例
# 查询部分字段
SELECT id,name,age FROM stu
# 查询所有字段
SELECT * FROM stu
# 带条件的查询
SELECT * FROM 表名 WHERE 条件1 and 条件2

3.4 举例:

-- 查询所有的学生
select * from stu
-- 查询所有学生的id,name,height
select id,name,height from stu
-- 带条件的查询
select * from stu where 条件
-- 查询所有的男同学
select * from stu where sex='男'
-- 查询id为2的男同学
select * from stu where id=2
-- 查询年龄大于50的同学
select * from stu where age > 50
-- 查询年龄大于50岁的男同学
select * from stu where age>50 and sex='男'
-- 查询年龄在30~60之间的同学,包括30和60
select * from stu where age>=30 and age<=60
select * from stu where age between 30 and 60

4.后端搭建


4.1 搭建后端项目

1.初始化 npm init -y

2.下载开发依赖包

# express 用于创建服务器
# mysql 用于操作mysql数据库
# cors 用于实现 ajax 跨源资源共享
# multer 用于实现 文件上传
npm install express mysql cors multer

3.在项目根目录下,创建app.js文件,内容如下:

const express = require('express')
const server = express()
server.get('/test', (req, res) => {
  res.send({ code: 200, msg: 'ok' })
})
server.listen(3001, () => console.log('服务器启动成功提示'))

4.测试使用 nodemon app.js    至此后端项目搭建完毕-可以通过浏览器访问接口

http://localhost:3001/test

4.2  后端对数据库进行操作(增删改查)

步骤

  1. 启动phpstudy中的mysql服务
  2. navicat连接数据库服务器
  3. 创建数据库(herodb),数据表

用sql语句来创建表  

-- 创建hero表,记录英雄信息
create table heros(
  id int not null primary key auto_increment, 
  name varchar(255) not null, 
  gender varchar(255),
  img varchar(255),
  isdelete tinyint default 0
)
character set utf8;
-- 创建user表,用来记录用户注册信息
create table user (
  id int not null primary key auto_increment, 
  username varchar(255) not null, 
  password varchar(255) not null
)
character set utf8;

image.png

4.3 测试数据库连接

引入前面封装的数据库操作模块,对上面创建的数据库进行连接测试

image.png

新建util/sql.js

module.exports = {
  query: function (sql, callback) {
    const mysql = require('mysql');
    const conn = mysql.createConnection({
      host     : 'localhost',   // 你要连接的数据库服务器的地址
      user     : 'root',        // 连接数据库服务器需要的用户名
      password : 'root',        // 连接数据库服务器需要的密码
      database : 'herodb'      //你要连接的数据库的名字
    });
    conn.connect();
    // 完成增删改查
    conn.query(sql, callback);
    // 手动关闭连接
    conn.end();
  }
}

新建util/sqltest.js

const conn = require('./sql.js')
conn.query('select * from heros', (err, result) => {
  console.log(result)
})

测试

node sqltest.js

5. 完整的后端代码(包括操作数据库)


./router/front.js

// ./router/front.js
const conn = require('../util/sql.js')
const express = require('express');
const router = express.Router();
router.get('/getinfo', function(req, res) {
  conn.query('select * from user', (err, result) => {
  console.log(result)
  res.json({code: 200, msg: '请求成功', data: result})
})
});
router.get('/getadd', function(req, res) {
  conn.query('insert into user (name,pwd) values("hh","1996")',
 (err, result) => {
  console.log(result)
  res.json({code: 200, msg: '请求成功--添加成功!', data: result})
})
});
router.get('/getdel', function(req, res) {
  conn.query('delete from user where id=10086', (err, result) => {
  console.log(result)
  res.json({code: 200, msg: '请求成功--添加成功!', data: result})
})
});
router.get('/getdetail', function(req, res) {
  res.send('getdetail-我是好人啊');
});
module.exports = router;

入口文件app.js

// 0. 加载 Express
const express = require('express')
// 1. 调用 express() 得到一个 app
//    类似于 http.createServer()
const app = express()
const frontRouter = require('./router/front');
const serverRouter = require('./router/admin');
// // 1. 加载mysql
// var mysql = require('mysql');
var cors = require('cors')
app.use(cors())
// 路由中间件
app.use('/front', frontRouter);
app.use('/server', serverRouter);
// 1. 使用中间件--多一个body
app.use(express.urlencoded());
app.post("/add",function(req,res){
    //2. 可以通过req.body来获取post传递的键值对  
    res.json(req.body)
})
app.use(express.json());
// 会自动加入req.body属性,这个属性中就包含了post请求所传入的参数
// 用来处理JSON格式的数据
app.post('/postJSON',(req,res)=>{
    // 后端收到post传参
    console.log(req.body);
    res.send('/postJSON')
})
// 2. 设置请求对应的处理函数
app.use(express.static('public'))
function getClientIp(req) {
  return req.headers['x-forwarded-for'] ||
      req.connection.remoteAddress ||
      req.socket.remoteAddress ||
      req.connection.socket.remoteAddress;
}
app.use((req,res,next) => {
  console.log('我来用记录访问日志')
  // 获取当前用户访问的页面地址: req.url
  // 获取当前用户的id的地址: ?
  // 当前时间
  const dt = new Date()
  console.log(dt.toLocaleTimeString())
  console.log(req.url)
  console.log('来自:', getClientIp(req));
  // fs写入某个日志文件中
  next();
})
// 2. 创建连接对象
// var connection = mysql.createConnection({
//   host     : 'localhost',   // 你要连接的数据库服务器的地址
//   port     : 3306,// 端口号
//   user     : 'root',        // 连接数据库服务器需要的用户名
//   password : 'root',        // 连接数据库服务器需要的密码
//   database : 'wang'      //你要连接的数据库的名字
// });
// 3. 连接到MySQL服务器
// connection.connect((err) => {
//   // 如果有错误对象,表示连接失败
//   if (err) return console.log('数据库连接失败')
//   // 没有错误对象提示连接成功
//   console.log('mysql数据库连接成功')
// });
// 4. 执行SQL语句--添加
// let sql = 'insert into user (name,pwd) values("小王8","99999999")'
// connection.query(sql, (err, result) => {
//     if (result.affectedRows > 0) {
//         console.log('添加成功,新数据的id为:' + result.insertId);
//     } else {
//         console.log('添加失败');
//     }
// });
// 4. 执行SQL语句--查询
// let sql = 'select id,name,pwd from user';
// connection.query(sql, (err, result, fields) => {
//     if (err) throw err; // throw err 相当于 return console.log(err);
//     console.log(result); // result就是查询结果
// });
// 3. 监听端口号,启动 Web 服务
app.listen(3000, () => console.log('app listening on port 3000!'))

6.前端项目代码、后端项目代码地址下载


我这次写的项目代码已经上传csdn,可以下载,免费。

image.png

相关实践学习
基于CentOS快速搭建LAMP环境
本教程介绍如何搭建LAMP环境,其中LAMP分别代表Linux、Apache、MySQL和PHP。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
3月前
|
前端开发
前端毕业设计|基于Vue+Nodejs实现游戏资讯平台(二)
前端毕业设计|基于Vue+Nodejs实现游戏资讯平台
|
1月前
|
JavaScript API
Vue3新的状态管理库-Pinia(保姆级别教程)
Vue3新的状态管理库-Pinia(保姆级别教程)
35 0
|
2月前
|
Web App开发 JavaScript 前端开发
构建现代Web应用:Vue.js与Node.js的完美结合
在当今快速发展的Web技术领域,选择合适的技术栈对于开发高效、响应迅速的现代Web应用至关重要。本文深入探讨了Vue.js和Node.js结合使用的优势,以及如何利用这两种技术构建一个完整的前后端分离的Web应用。不同于传统的摘要,我们将通过一个实际的项目示例,展示从搭建项目架构到实现具体功能的整个过程,着重介绍了Vue.js在构建用户友好的界面方面的能力,以及Node.js在处理服务器端逻辑和数据库交互中的高效性。通过本文,读者不仅能够理解Vue.js与Node.js各自的特点,还能学习到如何将这两种技术融合应用,以提升Web应用的开发效率和用户体验。
QGS
|
3月前
|
前端开发 Java 关系型数据库
手拉手全栈springboot+vue2+Element实现分页
手拉手全栈springboot+vue2+Element实现分页
QGS
27 0
|
3月前
|
JavaScript
Vue3 + Typescript + Node.js 搭建elementUI使用环境
Vue3 + Typescript + Node.js 搭建elementUI使用环境
43 0
|
3月前
|
人工智能 小程序 前端开发
毕业设计|基于NODE+VUE的校园跑腿平台系统
毕业设计|基于NODE+VUE的校园跑腿平台系统
|
3月前
|
监控 前端开发 JavaScript
在线教育系统|线上教学系统|基于Springboot+Vue+Nodejs实现在线教学平台系统
在线教育系统|线上教学系统|基于Springboot+Vue+Nodejs实现在线教学平台系统
|
3月前
|
前端开发 JavaScript 关系型数据库
前端毕业设计|基于Vue+Nodejs实现游戏资讯平台(一)
前端毕业设计|基于Vue+Nodejs实现游戏资讯平台
|
3月前
|
前端开发
招聘求职系统|基于Springboot+Vue+Nodejs实现求职招聘系统(三)
招聘求职系统|基于Springboot+Vue+Nodejs实现求职招聘系统
招聘求职系统|基于Springboot+Vue+Nodejs实现求职招聘系统(三)
|
3月前
招聘求职系统|基于Springboot+Vue+Nodejs实现求职招聘系统(二)
招聘求职系统|基于Springboot+Vue+Nodejs实现求职招聘系统
招聘求职系统|基于Springboot+Vue+Nodejs实现求职招聘系统(二)