前端（jquery）+ 后端（nodeJS）+数据库

于 2024-06-20 12:53:30 发布
阅读量644 收藏 17
点赞数 24
文章标签： 前端 jquery 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85123579/article/details/139829517
版权 
            // 如果需要分页器

            pagination: {

            el: '.swiper-pagination',

            },

            

            // 如果需要前进后退按钮

            navigation: {

            nextEl: '.swiper-button-next',

            prevEl: '.swiper-button-prev',

            },

            

            // 如果需要滚动条

            scrollbar: {

            el: '.swiper-scrollbar',

            },

        }) 

        }

    }

})

}

//渲染商品列表

function render(){

$.ajax({

    url:'http://127.0.0.1:4000/api/list',

    method:'get',

    success:function(data){

        if(data.status==0){

            let list=data.data

            //拿到数据后遍历出来

            let productStr=list.map(item=>{

                return `

                    <div class="listSingle">

                        <img src="${item.url}" οnclick=shoplist(${item.id})>

                        <div>

                            <p>${item.product}</p>

                            <p>￥${item.id}</p>

                        </div>

                        <span class="iconfont icon-gouwuche" data-index="${item.id}")></span>

                    </div>

                `



            }).join('')

           $('.render').html(productStr)

           //加入购物车

           addCart()

        }

    }

})

}

//搜索框搜索功能

function search(){

$('.icon-sousuo').on('click',function(){

    $.ajax({

        url:'http://127.0.0.1:4000/api/search',

        method:'get',

        data:{

            info:$('input[name="search"]').val()

        },

        success:function(data){

            if(data.status==1){

                alert(data.message)

            }else{

                let list=data.data

                let productStr=list.map(item=>{

                    return `

                        <div class="listSingle")>

                            <img src="${item.url}">

                            <div>

                                <p>${item.product}</p>

                                <p>￥${item.id}</p>

                            </div>

                            <span class="iconfont icon-gouwuche"></span>

                        </div>

                    `

                }).join('')

               $('.render').html(productStr) 

            }

        }

    })

})

}

//底部跳转功能

function jump(){

$('#foot').on('click','.icon-dingdan',function(){

    location.href='index.html'

}).on('click','.icon-gouwuche',function(){

    location.href='gouwuche.html'

}).on('click','.icon-yonghu',function(){

    location.href="user.html"

})

}

//加入购物车

function addCart(){

$('.listSingle').on('click','.icon-gouwuche',function(){

	//获取购物车

    let id=$(this).attr('data-index');

   $.ajax({

    url:'http://127.0.0.1:4000/api//list/id',

    method:'get',

    data:{

        id:id

    },

    success:function(data){

        console.log(data);

        if(data.status==0){

        	//拿到本地存储的购物车信息

            let product=localStorage.getItem('shopList')

            let productArr=JSON.parse(product)||[]

            //判定是否已经有该商品

            let isOk=productArr.some(item=>item[0].id==id)

            if(!isOk){

                productArr.push(data.data)

                localStorage.setItem('shopList',JSON.stringify(productArr))

            }

           

        }

    }

   })

    

})

}

//进入商品信息界面

function shoplist(id){

location.href='shoplist.html?id='+id

}

getBanner()

render()

search()

jump()




*   CSS

#main {

width: 100%;

flex: 1;

overflow: auto;

background-color: aquamarine;

}

#main .swiper {

width: 100%;

height: 350px;

}

#main .specificFunctions {

width: 100%;

height: 288px;

background: url(“…/images/bc1.jpg”) no-repeat 0px -228px;

background-size: 700px auto;

}

#main .render .listSingle {

transition: 0.25s transform ease-in-out;

margin-top: 30px;

display: flex;

}

#main .render .listSingle img {

width: 438px;

height: 350px;

}

#main .render .listSingle div {

margin-left: 20px;

}

#main .render .listSingle div p:nth-child(1) {

font-size: 40px;

font-weight: 700;

}

#main .render .listSingle div p:nth-child(2) {

margin-top: 110px;

font-size: 20px;

color: grey;

}

#main .render .listSingle span {

margin-left: 18px;

margin-top: 86px;

font-size: 77px;

color: #f06c60;

}

/*# sourceMappingURL=index.css.map */




2.  购物车代码



*   HTML




<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<link rel="stylesheet" href="../lib/font/iconfont.css">

<link rel="stylesheet" href="../css/common.css">

<link rel="stylesheet" href="../css/gouwuche.css">

<div id="head">

    <div>云点餐项目</div>

    <div class="search">

        <input type="text" name="search">

        <span class="iconfont icon-sousuo"></span>

    </div>

</div>

<div id="main">

    <table></table>

    <div class="total"></div>

</div>

<div id="foot">

    <span class="iconfont icon-dingdan"></span>

    <span class="iconfont icon-gouwuche"></span>

    <span class="iconfont icon-yonghu"></span>

</div>

<script src="../js/jquery.js"></script>

<script src="../js/gouwuche.js"></script>




*   JS

//底部跳转功能

function jump(){

$('#foot').on('click','.icon-dingdan',function(){

    location.href='index.html'

}).on('click','.icon-gouwuche',function(){

    location.href='gouwuche.html'

}).on('click','.icon-yonghu',function(){

    location.href="user.html"

})

}

//渲染商品信息

function getlist(){

let product=localStorage.getItem('shopList')

let productArr=JSON.parse(product)||[]

let tableHead=`

<tr>

    <td>商品名</td>

    <td>图片</td>

    <td>价格</td>

    <td>数量</td>

    <td>总价</td>

    <td>删除</td>

    </tr>

`

let tableStr=productArr.map(item=>{

    return `

        <tr>

            <td>${item[0].product}</td>

            <td><img src="${item[0].url}"></td>

            <td>${item[0].id}</td>

            <td class="fun"><input type="button" name="sub" value="-"><input type="text" name="text" value="1"><input type="button" name="add" value="+"></td>

            <td class="singleTotal">${item[0].id}</td>

            <td class="del" data-index="${item[0].id}">删除</td>

        <tr>

    `

}).join('')

$('table').html(tableHead+tableStr)

}

//删除功能

$(‘table’).on(‘click’,‘.del’,function(){

//拿到id根据id删除

let id=$(this).attr('data-index')

let data=JSON.parse(localStorage.getItem('shopList'))

let productIndex=data.findIndex(item=>item.id==id)

data.splice(productIndex,1)

localStorage.setItem('shopList',JSON.stringify(data))

getlist()

})

//增加和减少

$(‘table’).on(‘click’,‘input[name=“sub”]’,function(){

if($(this).next().val()>1){

$(this).next().val($(this).next().val()-1)

let priceAll=$(this).next().val()*$(this).parent().prev().html()

$(this).parent().next().html(priceAll.toFixed(2))

}

total()

}).on(‘click’,‘input[name=“add”]’,function(){

 $(this).prev().val(parseInt($(this).prev().val())+1)

 let priceAll=$(this).prev().val()*$(this).parent().prev().html()

 $(this).parent().next().html(priceAll.toFixed(2))

 total()

})

//计算总价

function total(){

let sum=0

$('.singleTotal').each((index,item)=>{

    sum=sum+Number($(item).html())

})

$('.total').html('￥'+sum)

}

total()

getlist()

jump()




*   CSS

#main {

width: 100%;

flex: 1;

overflow: auto;

background-color: aquamarine;

}

#main table {

width: 100%;

height: 100%;

}

#main table tr td img {

width: 80px;

height: 80px;

}

#main table tr .fun {

width: 100px;

}

#main table tr .fun input {

vertical-align: top;

width: 20px;

height: 20px;

}

#main .total {

margin-left: 30px;

font-size: 30px;

color: red;

}

/*# sourceMappingURL=gouwuche.css.map */




3.  用户界面代码



*   HTML




<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<link rel="stylesheet" href="../lib/font/iconfont.css">

<link rel="stylesheet" href="../css/common.css">

<style>

    #head{

        height: 300px;

    }

    #main{

        height: 100%;

    }

    #main .login,.sigin,.siginout{

        

        width: 700px;

        height: 50px;

        background-color: #f46c60;

        text-align: center;

        line-height: 50px;

        cursor: pointer;

        

    }

    .input{

        width: 700px;

        height: 50px;

        text-align: center;

    }

    .input input{

        width: 400px;

        height: 50px;

        outline: none;

    }

</style>

<div id="head">

    <div>云点餐项目</div>

    <div class="search">

        <input type="text" name="search">

        <span class="iconfont icon-sousuo"></span>

    </div>

</div>

<div class="sigin">登录</div>

<div class="login">注册</div>

<div class="input">

    <!-- <form class="loginInput">

        <input type="text" name="name"><br>

        <input type="password" name="password"><br>

        <input type="submit" name="submit" value="登录提交">

    </form> -->

</div>

<div id="foot">

    <span class="iconfont icon-dingdan"></span>

    <span class="iconfont icon-gouwuche"></span>

    <span class="iconfont icon-yonghu"></span>

</div>

<script src="../js/jquery.js"></script>

<script src="../js/user.js"></script>

<script>

    

    

</script>




*   JS

//底部跳转功能

function jump(){

$('#foot').on('click','.icon-dingdan',function(){

    location.href='index.html'

}).on('click','.icon-gouwuche',function(){

    location.href='gouwuche.html'

}).on('click','.icon-yonghu',function(){

    location.href="user.html"

})

}

//渲染注册输入框

$(‘.login’).on(‘click’,function(){

let str=`

    <form class="loginInput">

        <input type="text" name="name"><br>

        <input type="password" name="password"><br>

        <input type="submit" name="submit" value="注册提交">

    </form>

    `

$('.input').html(str)

login()

})

//渲染登录输入框

$(‘.sigin’).on(‘click’,function(){

let str=`

    <form class="siginInput">

        <input type="text" name="name"><br>

        <input type="password" name="password"><br>

        <input type="submit" name="submit" value="登录提交">

    </form>

    `

$('.input').html(str)

sigin()

})

//注册功能

function login(){

$('.loginInput').on('submit',function(e){

    e.preventDefault()

    $.ajax({

        url:'http://127.0.0.1:4000/api/login',

        method:'get',

        data:{

            username:$('.loginInput input[name="name"]').val(),

            password:$('.loginInput input[name="password"]').val(),

        },

        success:function(data){

            if(data.status==0){

                alert('注册成功')

            }

        }

    })

})

}

//登录功能

function sigin(){

$('.siginInput').on('submit',function(e){

    e.preventDefault()

    console.log($('input[name="name"]').val());

    $.ajax({

        url:'http://127.0.0.1:4000/api/sigin',

        method:'get',

        data:{

            username:$('input[name="name"]').val(),

            password:$('input[name="password"]').val(),

        },

        success:function(data){

            console.log(data);

            if(data.status==0){

                 //登录成功渲染欢迎界面

                alert('登录成功')

                let str=`

                    <div>欢迎${data.data[0].username}</div>

                    <div class="siginout">退出</div>

                `



                $('#main').html(str)

                //退出功能

                siginout()

            }

        }

    })

})

}

//欢迎界面和退出

function siginout(){

$('.siginout').on('click',function(){

    let str=`

    <div class="sigin">登录</div>

    <div class="login">注册</div>

    <div class="input"></div>

    `

    $('#main').html(str)

})

}

jump()




4.  商品详细代码



*   HTML




<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<link rel="stylesheet" href="../lib/font/iconfont.css">

<div class="back"><span class="iconfont icon-shangyiye"></span></div>

<div class="render"></div>

<script src="../js/jquery.js"></script>

<script src="../js/shoplist.js"></script>




*   JS

function getShop(){

//分割字符串拿到url中的id

let url=location.href

let idArr=url.substring((url.indexOf('?')+1))

let id=idArr.split('=')[1]

console.log(id);

$.ajax({

    url:'http://127.0.0.1:4000/api//list/id',

    method:'get',

    data:{

        id:id

    },

    success:function(data){

        if(data.status==0){

            let list=data.data

                let productStr=list.map(item=>{

                    return `

                        <div class="listSingle")>

                            <img src="${item.url}">

                            <div>

                                <p>${item.product}</p>

                                <p>￥${item.id}</p>

                            </div>

                        </div>

                        <div class="buyNow">立即购买</div>

                    `

                }).join('')

                $('.render').html(productStr)

        }

    }

})

}

//回到主界面

$(‘.back’).on(‘click’,function(){

location.href='index.html'

})

getShop()




*   CSS

.back span {

margin-left: 10px;

font-size: 40px;

}

.listSingle img {

width: 700px;

}

.listSingle div p:nth-child(1) {

font-size: 30px;

color: black;

}

.listSingle div p:nth-child(2) {

font-size: 20px;

color: grey;

}

.buyNow {

width: 100px;

height: 50px;

border-radius: 25px;

background-color: #f4606c;

text-align: center;

line-height: 50px;

cursor: pointer;

}

/*# sourceMappingURL=shoplist.css.map */




[]( )后端

=====================================================================



1.  主界面代码app.js

//导入express模块

const express=require(‘express’)

const app=express()

const joi=require(‘joi’)

//解决跨域问题

const cors=require(‘cors’)

app.use(cors())

//解析表单数据

app.use(express.urlencoded({extended:false}))

//封装res.send()响应错误信息

app.use(function(req,res,next){

//status值默认失败1

res.cc=function(err,status=1){

    res.send({

        status,

        message:err instanceof Error ?err.message:err,

    })

}

next()

})

//导入用户路由模块

const apiRouter=require(‘./router/api’)

app.use(‘/api’,apiRouter)

//定义错误级别中间件

app.use((err,req,res,next)=>{

//验证失败错误

if(err instanceof joi.ValidationError) return res.cc(err)

//身份认证出错

if(err.name==='UnauthorizedError') return res.cc('身份认证出错')

res.cc(err)

})

//启动监听端口

app.listen(4000,function(){

console.log('express listen running at 4000');

})




2.  路由代码router/api.js

const express=require(‘express’)

const router=express.Router()

//引入路由处理模块

const api_handler=require(‘…/router_handler/api_handler’)

//验证模块 模式验证

const expressJoi=require(‘@escook/express-joi’)

const {login_schema,sigin_schema,listId_schema}=require(‘…/schema/user’)

//注册接口

router.get(‘/login’,expressJoi(login_schema),api_handler.login)

//登录接口

router.get(‘/sigin’,expressJoi(sigin_schema),api_handler.sigin)

//商品列表接口

router.get(‘/list’,api_handler.list)

//查询商品接口

router.get(‘/list/id’,expressJoi(listId_schema),api_handler.listId)

//搜索框搜索

router.get(‘/search’,api_handler.search)

//轮播图

router.get(‘/banner’,api_handler.banner)

module.exports=router




3.  路由处理函数router\_handler

const db=require(‘…/db/index’)

//注册处理函数

exports.login=function(req,res){

    let userinfo=req.query

    

    let sql='SELECT * FROM ev_users WHERE username=?'

ES6

  • 列举常用的ES6特性：

  • 箭头函数需要注意哪些地方？

  • let、const、var

  • 拓展：var方式定义的变量有什么样的bug？

  • Set数据结构

  • 拓展：数组去重的方法

  • 箭头函数this的指向。

  • 手写ES6 class继承。

微信小程序

  • 简单描述一下微信小程序的相关文件类型?

  • 你是怎么封装微信小程序的数据请求？

  • 有哪些参数传值的方法？

  • 你使用过哪些方法，来提高微信小程序的应用速度？

  • 小程序和原生App哪个好？

  • 简述微信小程序原理？

  • 分析微信小程序的优劣势

  • 怎么解决小程序的异步请求问题？

其他知识点面试

  • webpack的原理

  • webpack的loader和plugin的区别？

  • 怎么使用webpack对项目进行优化?

  • 防抖、节流

  • 浏览器的缓存机制

  • 描述一下二叉树, 并说明二叉树的几种遍历方式?

  • 项目类问题

  • 笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。

2401_85123579
关注
  • 24
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单的问答系统jQuery+bootstrap
08-03
【标题】"简单的问答系统jQuery+bootstrap"是一个基于前端库jQuery和Bootstrap构建的轻量级交互式问答平台。这个项目通常适用于初学者或学生作为学习Web开发基础的实践项目，尤其是对于那些正在进行Node.js毕业设计...
教你如何在Node.js中使用jQuery
12-23
想要在NodeJs中使用jQuery？ 首先，我们得安装jquery， npm install jquery 。安装后的版本是 3.1.0 接着，第一感觉我们会使用 var $ = require(‘jquery’) 。 将以下代码保存为app.js var $ = require('jquery') $("body").append("TEST"); console.log($("body").html()); 运行 node app.js 。提示错误： Error: jQuery requires a window with a document 那么我们该怎么
NodeJs中使用jQuery
Cocktail_py的博客
04-15 2450
1.安装jquery以及jsdom npm install jsdom npm i jquery 2.jquery例子 // const $ = require('jquery')(require("jsdom").jsdom().defaultView);//老版本 // 参考https://www.cnblogs.com/DonaHero/p/10001804.html const jsdom = require('jsdom'); const {JSDOM} = jsdom; const {docu
NodeJs使用jQuery中$Ajax
十三阿哥的博客
06-01 666
【代码】NodeJs使用jQuery中$Ajax。
安全开发-JS应用&NodeJS指南&原型链污染&Express框架&功能实现&审计&WebPack打包器&第三方库JQuery&安装使用&安全检测
今天是几号的博客
08-27 2551
jQuery是一个快速、简洁的JavaScript框架,是一个丰富的JavaScript代码库。它封装JavaScript常用功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。multer：node.js中间件，用于处理 enctype=“multipart/form-data”（设置表单的MIME编码）的表单数据。body-parser：node.js中间件，用于处理 JSON, Raw, Text和URL编码的数据。
VUE + nodejs实战
最新发布
06-09
在本项目中，可能涉及到将Vue.js作为前端框架，负责用户界面的交互和展示，而Node.js作为后端，处理数据请求和业务逻辑。jQuery EasyUI-1.4.5是一个基于jQuery的UI框架，包含了大量的预定义组件，如对话框、表格、...
基于jsp + bootstrap + jquery + DBCP的物业管理系统源码.zip
10-04
此外，标签中提到了"java"和"nodejs"，这表明系统可能采用了Java作为后端服务器语言，处理业务逻辑和数据库操作，而"nodejs"可能用于构建部分辅助服务或脚本，例如构建工具、API接口等。"express"是Node.js的一个Web...
基于Vue+NodeJS的宿舍管理系统，项目包含设计图和数据库关系、脚本等文档，可帮助运行
04-26
该宿舍管理系统是一个集成Vue.js前端框架和Node.js后端服务的Web应用，旨在提供一个方便、高效的宿舍管理解决方案。这个项目不仅提供了完整的源代码，还包括设计图、数据库关系图、数据库脚本以及开发文档，因此对于...
nodejs简单搭建前端后端网站demo
06-14
本教程将通过一个简单的Node.js项目——"nodejs简单搭建前端后端网站demo"，来讲解如何利用Node.js创建一个基本的前后端交互的Web应用。 一、准备工作 在开始之前，确保已经安装了Node.js和npm（Node包管理器）。这...
Node.js中使用jQuery的做法
10-21
在Node.js中使用jQuery的做法，需要先安装jquery，npm install jquery ,安装后的版本是 3.1.0,本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看下吧
最方便的前端后端数据库部署
接着奏乐接着舞的博客
03-11 6164
请按照图示和说明文字去做，100%可成功部署！
前端用 HTML5 + CSS3 + JavaScript，后端连接什么数据库更简单？
Itmastergo的博客
04-12 1213
当前端使用 HTML5、CSS3 和 JavaScript 进行开发时，后端连接何种数据库是一个非常重要的问题，因为数据库的选择直接影响着后端代码的编写、数据存储与查询的效率以及系统的可维护性。
nodejs上HTML分析利器node-jquery
weixin_33747129的博客
02-27 204
      首先描述产生这篇随笔的场景：我需要获取项目在jenkins构建的最新Javascript Coverage显示在供管理层次查看的项目情况Report上，但是由于jenkins没有直接的API取得数据所需数据，所以我们只能从自建的容器发布Javascript Coverage数据API，供Report项目使用。      由于采用简单的数据分析，只是Host一个简单的web Serve...
初学node.js 使用npm安装 jquery遇到的问题
m0_51578693的博客
10-24 800
初学node.js 使用npm安装 jquery遇到的问题
node.js(接jquery篇)
weixin_44210475的博客
10-18 1053
node.js js写后台的，不依赖浏览器（不依赖DOM,BOM）,原生js可以 nodejs软件 装好之后node -v:显示版本说明装好了 node 相当于浏览器控制台（不能保存，了解即可） node执行方式 下面是要运行的代码： for(var i = 0 ; i<3;i++){ console.log("大傻吊"); } cd 文件夹路径 ；然后node 文件名执行该文件； [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-igTqtQ34-160
在Node.js中使用jQuery示例
wsdhla的专栏
05-20 338
查看npm官网：https://www.npmjs.com/package/jquery 安装jQuery npm i -g jquery 需要使用jsdom模拟document，安装jsdom npm i -g jsdom 编码： const jsdom = require('jsdom'); const {JSDOM} = jsdom; const {document} = (new JSDOM('<!doctype html><html>&lt..
node.js安装jquery
weixin_41915877的博客
12-08 383
node.js安装jquery
写一个前端代码用来调用后端nodejs文件
03-14
好的，我可以回答这个问题。您可以使用Ajax或Fetch API来...请注意，您需要将上面的代码放在前端JavaScript文件中，并将`/backend.js`替换为您实际的后端文件路径。此外，您还需要确保您的后端文件已经正确配置和运行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值