基于C语言的星宿网站框架设计

一、搭建

首先在 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 或者测试函数之类的,总之收获还是蛮大的。

猜你喜欢

转载自blog.csdn.net/newlw/article/details/125190253