node-18-ejs-mysql-综合

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS PostgreSQL,高可用系列 2核4GB
云数据库 RDS MySQL,高可用系列 2核4GB
简介: 综合练习 ,旨在了解前后端逻辑

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>
            <%  }%>
        <% }%>

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

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

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

欢迎入坑 大前端




相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发,帮助IT从业者们通过“阿里云Web应用上云解决方案”,了解一个企业级Web应用上云的常见架构,了解如何构建一个高可用、可扩展的企业级应用架构。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。 &nbsp; 相关的阿里云产品:云数据库RDS MySQL 版 阿里云关系型数据库RDS(Relational Database Service)是一种稳定可靠、可弹性伸缩的在线数据库服务,提供容灾、备份、恢复、迁移等方面的全套解决方案,彻底解决数据库运维的烦恼。 了解产品详情:&nbsp;https://www.aliyun.com/product/rds/mysql&nbsp;
相关文章
|
2天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1078 0
|
11天前
|
人工智能 运维 安全
|
10天前
|
人工智能 测试技术 API
智能体(AI Agent)搭建全攻略:从概念到实践的终极指南
在人工智能浪潮中,智能体(AI Agent)正成为变革性技术。它们具备自主决策、环境感知、任务执行等能力,广泛应用于日常任务与商业流程。本文详解智能体概念、架构及七步搭建指南,助你打造专属智能体,迎接智能自动化新时代。
|
2天前
|
弹性计算 Kubernetes jenkins
如何在 ECS/EKS 集群中有效使用 Jenkins
本文探讨了如何将 Jenkins 与 AWS ECS 和 EKS 集群集成,以构建高效、灵活且具备自动扩缩容能力的 CI/CD 流水线,提升软件交付效率并优化资源成本。
265 0
|
9天前
|
人工智能 异构计算
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
|
10天前
|
机器学习/深度学习 人工智能 自然语言处理
B站开源IndexTTS2,用极致表现力颠覆听觉体验
在语音合成技术不断演进的背景下,早期版本的IndexTTS虽然在多场景应用中展现出良好的表现,但在情感表达的细腻度与时长控制的精准性方面仍存在提升空间。为了解决这些问题,并进一步推动零样本语音合成在实际场景中的落地能力,B站语音团队对模型架构与训练策略进行了深度优化,推出了全新一代语音合成模型——IndexTTS2 。
758 23
|
2天前
|
缓存 供应链 监控
VVIC seller_search 排行榜搜索接口深度分析及 Python 实现
VVIC搜款网seller_search接口提供服装批发市场的商品及商家排行榜数据,涵盖热销榜、销量排名、类目趋势等,支持多维度筛选与数据分析,助力选品决策、竞品分析与市场预测,为服装供应链提供有力数据支撑。
|
2天前
|
缓存 监控 API
Amazon item_review 商品评论接口深度分析及 Python 实现
亚马逊商品评论接口(item_review)可获取用户评分、评论内容及时间等数据,支持多维度筛选与分页调用,结合Python实现情感分析、关键词提取与可视化,助力竞品分析、产品优化与市场决策。