一、搭建

首先在 nodejs 中安装 express 模块;

Npm install -g express

接着安装 express-generator;

Npm install -g express-genertor

接着使用命令创建一个项目

Express -e webpro2

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sj4RbwqQ-1654684788936)(https://www.writebug.com/myres/static/uploads/2022/6/8/06bdf43a92ed9b086d3a5346c89038a7.writebug)]

bin –存放连接数据库的操作

public –存放静态资源文件,CSS,图片等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LnktOOPM-1654684788939)(https://www.writebug.com/myres/static/uploads/2022/6/8/724ccb280ac7c7360fa6753ce8881208.writebug)]

routes –路由文件,存放 js 程序,用来分析客户端发来的 post 和 get 命令

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BIzeJ6XR-1654684788940)(https://www.writebug.com/myres/static/uploads/2022/6/8/a98f9fb5506c201d98fc94067aadabad.writebug)]

views –ejs 模板文件,存放 ejs 模板编写的前端页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QixipiFw-1654684788940)(https://www.writebug.com/myres/static/uploads/2022/6/8/b6e8cbe13dfac3490923adbc16f63c95.writebug)]

app.js –程序的入口,里面主要是利用以下代码进行路由分发

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var te = require('./routes/test');
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/', indexRouter);
app.use('/test', te);

package.json –存放配置信息,保存各个依赖包的版本信息等

二、数据储存

2.1 表单创建

用的是 PHP 脚本来进行表单创建,因为用 MySQL 命令行进行创建太麻烦了,然后直接放上代码,用的是 mysqli 函数进行数据库连接,然后创建语句,进行表创建。

2.2 数据库数据上传

用的是 nodejs 中的 fs 模块和 MySQL 模块来对 txt 文件按行读取,然后用正则来对数据流进行目标数据提取,

对本地 txt 文件进行读取

进行数据提交到数据库


左 客户表;右 城市表(675 条数据)

三、路由处理

3.1 Index.js

个 get 请求

第一个是登录界面,会返回 index.ejs

第二个是城市界面请求,客户端发送请求后,服务端会收到该请求,然后通过 req.query.city 提取里面的参数,通过数据库查询语句

varsql1="SELECT*FROMhouseWHEREcity=?andbuy=0ORDERBYRAND()LIMIT50";connection.query(sql1,[req.query.city],function(err,result) {

返回相应的城市数据,并通过拆分组成数组和 city.ejs 模板一起返回给客户端。

剩下其他是相关页面的请求

个 post 请求,该 post 请主要是登录功能,所以会对数据库进行查询,然后根据查询结果返回相应的操作。将数据库 pass 与 req.body.pass 进行比较。

3.2 users.js

该路由 js 里面只有有个 get’请求处理和 post 请求处理;

首先 get 请求,是返回 res.ejs 注册界面

然后 post 请求,该请求是处理注册的数据请求,这里使用中间件 body-parse,用 req.body.参数名来得到客户端发送的注册数据,在对数据进行提交时,首先会进行判断,主要是判断是否该用户名被使用过,如果没有被使用过,就进行提交到数据库,然后返回注册成功。

如果账号已经存在,则返回已经存在;

3.3 test.js

  • 该路由主要是来对每个房子的信息进行处理,如果客户端请求
  • 则 test.js 会对参数 a 进行提取,然后在数据库中进行查询 tag=req.query.a 的数据,将得到
  • 的数据进行数组化处理后,与 about.ejs 一同返回给客户端,进行页面渲染。
  • 另外的该路由还会处理来自/test 下的其他 get 请求,即与 about.ejs 有关的页面链接。

然后对其他请求,

3.4 其他重要的地方

对于数据库提取出来的数据,由于是 object 对象,直接传给前端是无法使用的(反正我没使用上,可能是我太菜了),所以通常对每个 select 语句的地方都会使用 for 循环进行数组化,方便前端页面的使用。在查询是否存在账户时,由于不会使用 exist,所以就使用其他麻烦的操作进行替代,将查询结果进行 stringfy,如果结果为空,在 string 化后是[]

故通过 if res==[];将新判断。


在每个路由 js 中都会有可连接数据库的语句块

四、登录.ejs 和注册.ejs

4.1 登录.ejs

里面有个轮播图,然后就是表单提交,在提交时,使用 js 进行验证,这部分就是利用正则表达式进行判断,首先利用 dom 提取表单的值,然后验证,如果进行所有验证后,均能通过,则设定一个哨兵true,在表单 form 中使用属性 onsubmit 进行限制,当 onsubmittrue 时,才允许提交。

Use()和 ps()函数返回 true 或者 false

对账户的限制是用户名只能以字母开始,而不能以数字,_或KaTeX parse error: Undefined control sequence: \w at position 29: …0,然后正则式是/^[A-z]\̲w̲{6,18}/,利用 test 函数,

对密码的限制是首先不能和账户相同,然后长度有限制。

4.2 注册.ejs

里面思路和登录的 ejs 是一样的,这里不再赘述,主要是表达值验证,onsubmit 判断,最后提交,服务器判断,最后返回注册结果。

五、心得体会

在进行后端搭建的时候遇到了很多很多困难,主要是对 express 框架的不熟悉,然后对数据库的语法不熟悉,对模型的加载渲染不熟悉。

Express 框架中有很多页面模型,,默认是 jade 模板。然后可以设置-e 变为 ejs 模板,还可以通过 ejspress 引擎进行改变,变为 HTML 模板,我在第一次时,用的 HTML 模板,遇到了一个最大的问题,就是在渲染页面并加载附带的 JSON 数据时,HTML 页面无法渲染 JSON 数据,为了这个事,我几乎浪费了 50 个小时,几乎差点放弃。最后,还是基于对 Web 的热爱,决定重新设计整个网站框架,在网上看了很多资料后,发现在别人博客中有利用 ejs 模板进行数据加载的 demo,于是决定利用他的示例。

利用 ejs 的确可以渲染服务器数据,这是是我高兴不已。然后我又遇到了另外一个问题,这个问题我在利用 pyhon 中的 django 开发网站时没有遇到(我还是用的我写 python 开发网站的思路)。最后经过很久的试验,终于发现了差别所在。Express 在加载 ejs 页面时,如果 <%=变量 %>,就会查询是否有变量从服务器传来,如果没有,就会报错。但是在 django 中,django 加载页面时如果 HTML 页面存在{{ 变量 }},如果服务器有传送相关数据,就会渲染数据,如果没有数据,就会默认不加载。

在对数据库进行操作时,也犯了一个不容易发现的错误。即如果没有将 res.render(‘about’,{data:re});放在 connection.query(sql1,[req.query.a] ,function (err, result) {}的回调函数中,res.render 和 connection.query 将会同时执行,data 中得不到数据库中 select 的数据,第二就是,function 是个函数,如果变量声明在回调函数中,在外界是得不到里面的变量。在连接数据库时,也花了很久的时间,因为我以为是 8088 端口,结果不是,是 3306 端口,唉气死了。

学会了在浏览器的开发者模式查看网页的问题,比如某些静态资源没有加载上,某些变量命名错误或者重复,以及可以动态调试页面布局。还学会了用 console.log 输出变量来检查某些算法或者语法错误。学会了从各个地方查阅资料,用 test 的方法写 demo 或者测试函数之类的,总之收获还是蛮大的。

基于C语言的星宿网站框架设计相关推荐

  1. 基于Android的期刊投稿网站的设计与开发

    摘 要 在我国,3G/4G移动互联网技术飞速发展,甚至第五代移动通信网络也正在研究中,手机的普及化让诸多行业有了改进的机遇.本课题借助于互联网和智能手机的飞速发展针对现在的期刊投稿情况,希望可以让作者 ...

  2. 基于Android的招聘求职网站的设计与实现

    毕业设计 基于Android的招聘求职网站的设计与实现 1.课题意义及目标 在二十一世纪求职方式跟以前是不同的,与在各个用人单位和招聘会上寻找理想的工作,基于安卓的招聘系统能够提供最好的最丰富及时的招 ...

  3. 基于WEB的考研论坛网站的设计与实现

    基于WEB的考研论坛网站的设计与实现 研究的背景与意义 选题依据:这次我们所设计的课题是考研论坛与学习生活之间的紧密关系的体现,现今的社会,越来越多的人开始使用论坛,考研论坛已经成为人与人之间交流的一 ...

  4. 计算机毕业设计ssm基于J2EE的山西旅游网站的设计与实现iiqmx系统+程序+源码+lw+远程部署

    计算机毕业设计ssm基于J2EE的山西旅游网站的设计与实现iiqmx系统+程序+源码+lw+远程部署 计算机毕业设计ssm基于J2EE的山西旅游网站的设计与实现iiqmx系统+程序+源码+lw+远程部 ...

  5. 教务处管理系统c语言编程,基于C语言的教务管理系统的设计

    基于C语言的教务管理系统的设计(任务书,开题报告,论文12000字,程序代码) 摘要 教务管理系统是现代化教育的重要组成部分,在现代高校管理中,一个高效的.准确的教务系统不仅能大大提高教学管理效率,还 ...

  6. Java 电商订单管理设计,基于Java的电商网站的设计与实现

    基于Java的电商网站的设计与实现  (获取作品请联系在线客服) 温馨提示:已经在本站下定的(原创)毕业设计(毕业论文)将不会再次出售!请你放心购买! 拟定毕业论文(设计)题目基于Java的电商网站的 ...

  7. ssm基于JAVA的求职招聘网站的设计与实现计算机毕业设计

    最新200套计算机专业原创毕业设计参考选题都有源码+数据库是近期作品 如果题目不合适,可以去我上传的资源里面找题目,找不到的话,评论留下题目,站内私我或add用户名,有时间看到机会给您发 1 2100 ...

  8. asp毕业设计——基于asp+sqlserver的个人网站建设设计与实现(毕业论文+程序源码)——个人网站建设

    基于asp+sqlserver的个人网站建设设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于asp+sqlserver的个人网站建设设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦 ...

  9. java开发论文答辩_毕业设计答辩基于JavaWeb的博客网站的设计与实现.ppt

    毕业设计答辩基于JavaWeb的博客网站的设计与实现 博客网站的设计与实现 --指导老师 XXXXX 学生 XXXXX 毕业答辩 一.研究背景和内容 二.系统环境的配置 三.系统使用的技术 四.系统概 ...

最新文章

  1. linux存储--文件描述符fd与FILE结构体(二)
  2. SELinux策略语言--客体类别和许可
  3. 成功解决xlrd.biffh.XLRDError: Unsupported format, or corrupt file: Expected BOF record; found b‘Debug is
  4. Python——常用模块
  5. 在Spring Boot中实现相关ID(用于SOA /微服务中的分布式跟踪)
  6. ei eo eq什么意思_EI源刊是什么意思
  7. 华为开源构建工具_为什么我构建了用于大数据测试和质量控制的开源工具
  8. SpringMvc异步请求的使用及部分原理
  9. ubuntu14.04 x86编译upx 3.92 及so加固
  10. mysql配置所有ip连接_Mysql查看用户连接数配置及每个IP的请求情况
  11. Hibernate 缓存机制详细分析
  12. 安徽省计算机水平模拟考试系统,中学信息技术考试练习系统——安徽省版
  13. MATLAB图像去雾算法
  14. Hybrid Astar 算法剖析和实现(一)
  15. opencv+VS2005安装说明
  16. NOI2016铜色记
  17. 关于java转义字符\解析。
  18. osg的geographic和geodetic
  19. 红楼梦》室内空间艺术+古代门窗及家居装饰陈设+陈设和起居及其他。
  20. 聊聊装机、计算机软件

热门文章

  1. 支付宝交易查询接口分析及实现----springboot项目接入支付宝(四)
  2. 支付宝年账单html5,2018支付宝年账单哪里查?支付宝2018年度账单怎么看
  3. 读书笔记:《奇特的一生》
  4. 哪种不是计算机的颜色,计算机调色与人工调色如何选择?
  5. 源码编译安装go,ERROR: Cannot find /root/go1.4/bin/go
  6. 3Dcnn 降假阳性模型调试(七)
  7. A*寻路中第四种烘培寻路方法Recast Mesh方法:
  8. 达梦数据库安装ODBC驱动及无法正常启动解决办法
  9. 学习笔记50--terminate called after throwing an instance of ‘YAML::BadFile‘ what(): bad file报错踩坑
  10. 知乎爬虫逻辑的实现以及answer的提取