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

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介: 【全栈之路】保姆级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

相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
2月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
85 3
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
38 4
|
3月前
|
JavaScript 前端开发
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
如何使用Vue和Element UI配合Node.js及multiparty模块实现图片上传并反显的功能,包括前端的Element UI组件配置和后端的Node.js服务端代码实现。
60 1
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
|
2月前
|
消息中间件 JavaScript 前端开发
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
50 1
|
2月前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
3月前
|
JavaScript 应用服务中间件 Linux
宝塔面板部署Vue项目、服务端Node___配置域名
本文介绍了如何使用宝塔面板在阿里云服务器上部署Vue项目和Node服务端项目,并配置域名。文章详细解释了安装宝塔面板、上传项目文件、使用pm2启动Node项目、Vue项目打包上传、以及通过Nginx配置域名和反向代理的步骤。
672 0
宝塔面板部署Vue项目、服务端Node___配置域名
|
3月前
|
JavaScript 前端开发
vue配合axios连接express搭建的node服务器接口_简单案例
文章介绍了如何使用Express框架搭建一个简单的Node服务器,并使用Vue结合Axios进行前端开发和接口调用,同时讨论了开发过程中遇到的跨域问题及其解决方案。
67 0
vue配合axios连接express搭建的node服务器接口_简单案例
|
4月前
|
JavaScript 前端开发 API
全栈开发革命来临!Vue.js与Node.js联手,打造前后端无缝对接的奇迹之作!
【8月更文挑战第30天】在Web开发领域,前后端分离与协作至关重要。Vue.js以其轻量级和易用性深受前端开发者喜爱,而Node.js则以高性能和事件驱动特性在后端领域崭露头角。二者结合开启了全栈开发新篇章,通过RESTful API或GraphQL实现高效稳定通信。本文以示例说明如何使用Vue.js和Node.js构建全栈应用,从前端Vue组件到后端Express服务器,展示了数据获取与展示的全过程。这种组合提供了一种高效简洁的全栈开发方案,使开发者能更专注于业务逻辑实现。
282 1
|
4月前
|
JavaScript
成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass,以及安装node-sass可能遇到的版本冲突问题
这篇文章介绍了在Vue项目中安装node-sass和sass-loader时遇到的版本冲突问题,并提供了解决这些问题的方法,包括在不降低node版本的情况下成功安装node-sass。
成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass,以及安装node-sass可能遇到的版本冲突问题
|
NoSQL JavaScript 应用服务中间件
node+mongo + vue 开发管理平台部署到阿里云服务器入坑之旅
导语:使用vue+element-ui开发前端,node.js+express+mongodb开发后端,部署到阿里云服务器(镜像信息Node.js)。 1、申请阿里云服务器 可以申请一个最便宜的用来练手。
2724 0