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

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

相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发,帮助IT从业者们通过“阿里云Web应用上云解决方案”,了解一个企业级Web应用上云的常见架构,了解如何构建一个高可用、可扩展的企业级应用架构。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。 &nbsp; 相关的阿里云产品:云数据库RDS MySQL 版 阿里云关系型数据库RDS(Relational Database Service)是一种稳定可靠、可弹性伸缩的在线数据库服务,提供容灾、备份、恢复、迁移等方面的全套解决方案,彻底解决数据库运维的烦恼。 了解产品详情:&nbsp;https://www.aliyun.com/product/rds/mysql&nbsp;
相关文章
|
11月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
202 2
|
7月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
190 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
8月前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
156 10
|
10月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
253 4
|
12月前
|
JavaScript 应用服务中间件 Linux
宝塔面板部署Vue项目、服务端Node___配置域名
本文介绍了如何使用宝塔面板在阿里云服务器上部署Vue项目和Node服务端项目,并配置域名。文章详细解释了安装宝塔面板、上传项目文件、使用pm2启动Node项目、Vue项目打包上传、以及通过Nginx配置域名和反向代理的步骤。
2708 1
宝塔面板部署Vue项目、服务端Node___配置域名
|
12月前
|
JavaScript 前端开发
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
如何使用Vue和Element UI配合Node.js及multiparty模块实现图片上传并反显的功能,包括前端的Element UI组件配置和后端的Node.js服务端代码实现。
168 1
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
|
11月前
|
消息中间件 JavaScript 前端开发
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
135 1
|
12月前
|
JavaScript 前端开发
vue配合axios连接express搭建的node服务器接口_简单案例
文章介绍了如何使用Express框架搭建一个简单的Node服务器,并使用Vue结合Axios进行前端开发和接口调用,同时讨论了开发过程中遇到的跨域问题及其解决方案。
196 0
vue配合axios连接express搭建的node服务器接口_简单案例
|
11月前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
JavaScript 前端开发 API
全栈开发革命来临!Vue.js与Node.js联手,打造前后端无缝对接的奇迹之作!
【8月更文挑战第30天】在Web开发领域,前后端分离与协作至关重要。Vue.js以其轻量级和易用性深受前端开发者喜爱,而Node.js则以高性能和事件驱动特性在后端领域崭露头角。二者结合开启了全栈开发新篇章,通过RESTful API或GraphQL实现高效稳定通信。本文以示例说明如何使用Vue.js和Node.js构建全栈应用,从前端Vue组件到后端Express服务器,展示了数据获取与展示的全过程。这种组合提供了一种高效简洁的全栈开发方案,使开发者能更专注于业务逻辑实现。
814 1