node-18-ejs-mysql-综合

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群版 2核4GB 100GB
推荐场景:
搭建个人博客
云数据库 RDS MySQL,高可用版 2核4GB 50GB
简介: 综合练习 ,旨在了解前后端逻辑

1.前言


综合练习 ,旨在了解前后端逻辑


2.express db一套走



const express = require('express');
const db = require("./db")
var app = express()
app.use(express.static(__dirname+"/public"))
app.set("views",__dirname +"/view")
app.set("view engine","ejs")
app.listen(9091,function(){
    console.log("9091 服务启动");
})



3.表单get请求



app.get("/postData",app.get("/postData", (req, res) => {
{
    var connection = db()
    connection.connect(function(err){
        if(err){
         return   console.log("网络繁忙:",err);
        }
        // console.log("req query:",req.query);
         var { username, tel, sex } = req.query
        connection.query("insert into students (name,tel,sex) values(?,?,?)",[username, tel, sex], (err, result) =>  {
            if(err){
              return  console.log("网络繁忙,数据库查询超时:",err);
            }
 // res.end() 会乱码 因为这个是node 自带的 方法 ,需要手动配置编码信息
 // res.send() express 已经配置过了编码信息
            res.send("添加成功"+"<a href='/'> 返回首页</a>")
            connection.end()
        })
    })
})



4.列表请求


前面操作都一样,只是数据库SQL语句不同

请求


app.get("/list", (req, res) => {})
SQL语句


// 获取数据库配置信息
    var connection = db()
    // 根据配置信息 链接数据库
    connection.connect(err => {
        if (err) {
            return console.log("list 链接数据库失败:", err);
        }
        //  执行SQL语句
        connection.query("select * from students", [], (err, result, field) => {
            if (err) {
                return console.log("执行SQL 查询列表 语句失败:", err)
            }
            // 获取 查询结果 一般是数组
            console.log("查询结果:", result);
            //  返回给前端
            res.render("list", { list: result })
            //关闭链接
            connection.end()
        })
    })
模板

view/list.ejs

一定养成好的习惯 不然报错这个格式非常不好排查


<% list.forEach(function(item){ %>
            <li>
               <h3>
                    <%= item.name %>
                </h3>
                <p>
                    <%= item.tel %>
                </p>
                <p>
                    <%= item.sex %>
                </p>
              </li>
            <% }) %>



5.删除


请求


app.get("/delete",function(req,res){})
SQL

通常前端收到删除成功的提示后,会在发送一个请求,查询数据;

而不是把 请求数据写到数据库的删除里


var connection = db()
    connection.connect(err => {
        if (err) {
            return console.log("删除 操作链接数据库失败", err);
        }
        //删除逻辑
        // 一般都是根据主键来删除字段
        // 因为主键是唯一 ,不会重复
        // 需要删除的主键从哪来 
        // 前端传过来的
        console.log("query",req.query);
        connection.query("delete from students where Id=?", [req.query.id], function (err, result) {
            if (err) {
                return console.log("删除操作失败", err)
            }
            //返回前端内容
            res.send("<a href='/list'>返回首页 </a>")
            // 执行SQL语句完成 
            // 在关掉数据库
            connection.end()
        })
    })
Id的传递


<a href="/delete?id=<%= item.Id %>">删除</a>
Id的大小写去数据库字段查看一下,和数据库保持一致,不容易出错


6.分页


分页这里要求数据量比较多,

找下生成多条数据的 SQL语句,导入到数据库里 执行下就好了


app.get('/',function(req,res){
 // 需要 前端请求的 页码 和每页的条数
    // 页码
    var pageNum = req.query.pageNum || 1
    // 每页条数
    var pageSize = req.query.pageSize || 10
    // 总条数
    var total = 100
    // SQL语句查询的时候   从哪条数据开始查
    var start = (pageNum-1)*pageSize
   var connection = db()
    connection.connect(function(err){
        if(err){
           return console.log("链接失败:",err);
        }
        connection.query("select * from tab_route limit ?,?",[start,pageSize],(err, result)=>{
            // console.log("查询结果:",result);
            res.render("index", {list:result,total:total,pageNum:pageNum})
            connection.end()
        })
    })
})
模板


<% for(var i=0;i<total/10;i++){  %>
            <% if(i==pageNum-1){ %>
                <a href="/?pageNum=<%= i+1  %>" class="active">
                     <%= i+1%></a>
            <%  }else{  %>
                    <a href="/?pageNum=<%= i+1%>"> <%= i+1%> </a>
            <%  }%>
        <% }%>

每页数据量 自己扩展哦 ,算个小练习

这里可以自己添加样式 优化 ,人靠衣装,马靠鞍嘛

优化的好,感觉前端后端不过如此,我要当全栈 哈哈

欢迎入坑 大前端




相关实践学习
基于CentOS快速搭建LAMP环境
本教程介绍如何搭建LAMP环境,其中LAMP分别代表Linux、Apache、MySQL和PHP。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
9月前
|
中间件 关系型数据库 MySQL
Node——express,mysql
Node——express,mysql
|
6天前
|
JavaScript 前端开发 关系型数据库
Node.js 连接 MySQL
Node.js 连接 MySQL
19 5
|
1月前
|
资源调度 JavaScript 关系型数据库
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)
41 0
|
1月前
|
资源调度 JavaScript 关系型数据库
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)(下)
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)
26 0
|
1月前
|
JavaScript 关系型数据库 MySQL
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)(上)
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)
42 0
|
9月前
|
SQL JavaScript 关系型数据库
node.js控制mysql的查询语句
node.js控制mysql的查询语句
56 0
|
10月前
|
JavaScript 关系型数据库 MySQL
Node.js学习笔记----mysql模块
Node.js学习笔记----mysql模块
|
SQL 前端开发 JavaScript
Node第三方包 【mysql2】
Node第三方包 【mysql2】
249 0
|
SQL 机器学习/深度学习 JavaScript
node.js 学习入门(08 - MySQL 数据库)
node.js 学习入门(08 - MySQL 数据库)
node.js 学习入门(08 - MySQL 数据库)
|
关系型数据库 MySQL
node+express 后台连接MySQL
创建server 全局下载 npm install express-generator@4 -g 进入目录 与src同级 express --view=ejs server 进入server目录 cd server 下载依赖 cnpm install 启动服务器 npm start
105 0