朱克武

摘要：前后端分离技术是目前网站开发的一个趋势，Ajax作为前后端通讯的一个接口，使用GET和POST方法，在前后端之间传递JSON格式的数据，是网站开发一个重要的开发工具。在网站的开发过程中，结合Chrome的F12的开发者工具，能够掌握数据在网络中传递的情况，通过对网络数据的分析，解决开发过程中，遇到的各类问题，加快网站开发的效率。

关键词：Ajax;JSON;调试工具;网络

中图分类号：TP311      文献标识码：A

文章编号：1009-3044（2021）33-0009-03

开放科学（资源服务）标识码（OSID）：

1 引言

经过三十多年的发展，网站技术已经非常成熟。上网已经成为人们日常生活的一部分，例如淘宝、京东等购物网站，在双十一购物节，上亿人次的访问量，也不会影响购物体验。常用的网站编程工具有php、jsp、asp.net这三种。网站前端开发工具、后端开发工具、网站测试工具等，与网站开发相关的各类软件非常多。网站开发技术不断发展，新技术不断涌现，现在网站开发多使用前后端分离技术，前端工程师专注网页的UI界面设计，后端工程师处理前端提交的数据，将数据处理结果返回给前端。这里一个主要的問题就是前后端数据交互涉及的协议问题。本网站前端页面设计使用 VS Code 工具，后端使用 VS2019，数据库使用MySQL。

2 用户登录

2.1用户登录界面的设计

上网浏览的各类网站，基本上都是动态网站。动态网站就是与数据库打交道，上网在网站上浏览网站信息，这些信息是网站管理人员将信息提交到后台数据库，数据是存放在数据库里面的。在网站上浏览的时候，网站将数据库的信息提取出来，显示在前端页面上。

网站开发第一步，设计数据表。数据表需要根据网站的需求来设计。就业网站的用户表涉及三类人员，一类是学生，一类是企业，一类是学校的管理人员。涉及一个权限的问题，例如，学生能够浏览各类企业信息，但是，不能修改企业信息。在涉及添加、修改等页面，需要对用户权限进行判断，有权限的才能够提交，否则拒绝。用户表主要由用户名、密码、用户类型等组成。登录界面如图1所示。

登录页面涉及的技术包括：正则表达式、Ajax、验证码的显示。正则表达式要判断用户名、密码是否符合要求，如长度必须多少位，字符类型等。登录是html网页，没有使用form表单格式提交数据，使用Ajax提交数据。页面加载的时候，使用Ajax向后端服务器发出请求，获取验证码。获取到的验证码是数字，同样，验证码可以是大小写字母、字母加数字，也可以是图像。在验证码文本框中，输入完验证码后，需要判断验证码是否与显示的验证码一致。三个文本框的内容都需要进行验证，输入的数据符合要求，登录按钮才能够提交数据。否则，在对应的文本框后面，显示错误提示信息。

网页前端技术的发展非常迅速，HTML5提供了 Canvas，使用Canvas能够绘制各类图形，也可以绘制图片。验证码的绘制包括三个部分：绘制验证码字符串，绘制杂乱点，绘制线条。绘制一些杂乱点和线条，目的是增加识别的难度，杂乱点、线条的多少根据需要，太多，影响验证码的识别，太少，起不到识别的效果。

前后端不分离的网站，前端的HTML文件、后端的ashx、php、jsp等文件都在同一个项目里面，所有的网站相关的文件、资源都在同一个项目里面，都由后端服务器负责。通过服务器的内置对象、超链接等实现各个页面之间的跳转、数据的处理等各类操作。

由于前端框架的发展，出现了前后端分离的思想，随着Ajax的出现，前后端分离才开始有了实现的基础[1]。前后端分离的网站，前端的HTML文件、样式文件、脚本文件、图片等存放在一个单独的项目里面。后端服务器项目，是独立的项目，后端的各类服务器文件，如数据表对应的实体类、数据库处理类、JSON类、数据表现层、数据操作层等各类文件，存放在项目里面。

Ajax的异步Get/Post请求，浏览器通过Ajax向服务器的URL地址提交数据，在Ajax的回调函数里面，接收服务器传递回来的数据[2]。由于前后端分离，遇到的第一个问题就是跨域问题。客户端的数据能够提交到服务器，服务器对提交的数据进行处理，处理完成以后，不管是成功还是失败，都必须给客户端一个反馈信息。在返回数据的时候，就报错了，客户端遇到跨域的问题。客户端能够将数据提交给服务器，但是，客户端接收不到服务器的回传信息。跨域就是通讯双方协议要一致，如都是http协议，IP地址、端口都要一致，有一个不同，就涉及跨域。Ajax不能跨域，浏览器的安全限制，不允许访问其他服务器上的JSON数据[3]。解决跨域问题有多种方式，方式一在服务器端响应对象的头部设置为“*”，放行所有的请求。

2.2用户登录服务器端设计

ASP.NET基于.NET框架，可以创建功能强大、灵活和可靠的数据驱动应用程序，实现对SQL Server、Oracle等关系数据库的访问[4]。ASP.NET使用一般处理程序处理登录界面提交的数据，后端处理程序一般都和数据库打交道，按照B/S三层架构式设计思路，将前后端完全分离，前端与后端通过接口进行数据通信[5]。本程序使用三层架构设计。首先，设计数据库类，用于处理数据表的添加、查找、更新、删除等操作，这个类是网站服务器开发的基础。其次，设计表现层UI、业务逻辑层BLL和数据访问层DAL。三层架构中，是层层调用的关系，表现层调用业务逻辑层，业务逻辑层调用数据访问层，数据访问层DAL与数据库类打交道。

网站是前后端分离的，前端数据的渲染，由前端负责，不用服务器后端处理。服务器端的三层架构中，表现层一般是HTML或ASP.NET文件，是用来展示信息的，属于前端的范围，既然服务器端不需要展示信息，就不用表现层，直接使用业务逻辑层，将前端的用户名、密码、用户类型通过业务逻辑层，往下一层传递，由数据访问层进行处理，将返回结果通过业务逻辑层带回来。

前后端使用JSON格式的数据，服务器取出前端提交的用户名、密码等数据，通过sql查询语句，在数据表里面，查询是否有这样的数据，有，查询成功，返回1;没有这条记录，查询失败，返回-1。服务器端将返回数据包装成JSON数据格式，返回给客户端。JSON格式由三部分组成：code、data、msg。code =1，表示成功。= -1，表示失败。data是返回的JSON格式的数据。msg是返回的信息，编程过程中，会遇到各种问题，后端开发人员需要将各种信息反馈给前端开发人员，由一个沟通的渠道，通过msg，告诉前端开发人员，遇到这些问题，该如何处理，如何在前端渲染。

3 用户注册

3.1用户登录界面

徐秋榕[6]通过对省级网上办事系统的需求进行划分，分为总体需求、公共服务需求等9个需求，通过需求分析，为项目开发提供理论依据和支持。本项目同样采用需求分析的方法，对用户注册进行需求分析，以及后续的开发。用户注册界面，属于添加页面，注册界面设计与数据表相关，一般数据表有什么字段，前端有对应的输入框，用于录入数据。在提交数据到服务器之前，需要对提交的数据进行正则表达式验证。验证成功，才能够提交。使用Ajax的post方法，提交数据，在Ajax中取得返回的数据，如果注册成功，跳转到主页面，如果注册不成功，提示注册不成功的错误信息，用户根据提示信息，进行检查，做后一步的处理。

3.2用户注册服务器端设计

每一个数据表都对应一个实体类，后端一般处理程序取得前端提交的数据，将数据打包为用户实体类的变量，通过业务逻辑层，传递给数据访问层，最后，接收数据访问层返回处理的结果，组装成JSON格式数据，返回给前端。在数据访问层需要判断数据表里是否有相同的用户名，数据符合要求，添加到用户表。在添加数据的时候，需要注意日期格式的数据。

4用户信息处理

用户信息的处理只能由管理员处理，其他用户没有权限管理。网站必须对密码进行加密和解密处理，对涉及用户信息修改的页面进行验证，有管理员权限的才能够对页面进行处理。用户信息处理包含用户信息的添加、查找、分页浏览、更新、删除操作。用户信息的添加就是注册操作，添加界面就不需要进行权限设置，任何人都可以注册。

4.1用户查找的界面设计

根据项目需求，设计用户信息的查找，可以按照数据表的多个字段进行查询。用得最多的查找，按照用户名查找，本用户信息表的查询是按照用户名查找的。使用Ajax的get方法，需要向服务器提交参数，参数的内容是用户名变量，已经用户名变量对应的数值。提交的参数格式可以是JSON格式。

有两种方式，可以显示从服务器接收的数据表里面的多条数据，一种方法是ul列表，一种是表格。网络传输默认都使用JSON格式，因此，在Ajax的接收回调函数里面，接到的数据是JSON对象，直接就可以使用这个对象，例如：var obj = data.Data，通过该对象，就能够获取对象中的数值。操作DOM元素，显示外部数据，使用jQuery相对简单方便。先找到ul对象，例如：var  show= $（"#show2"），找到id=show2的ul。其次，使用append方法，在ul对象中，添加li列表项，show.append（"

4.2用户查找服务器设计

用户信息的查找一般根据用户名查找，复杂一点，使用多字段查找。查找的SQL关键语句是 “select * from user where name=？name”。也可以使用like进行模糊查询。调用MySqlCommand对象执行ExecuteReader方法，使用MySqlDataReader对象，读取数据表里面的数据。或使用MySqlDataAdapter数据适配器对象，使用DataSet数据集对象读取数据表里面的数据。两种方式都可以读取数据表里面的数据。数据取出来以后，需要包装成JSON格式，方便前端开发人员使用。

4.3用户信息显示界面设计

用户信息是从服务器提取用户数据表里面的所有数据，在前端显示。和用户查找的方式是相同的。唯一不同的地方是查找用户表只是一条记录，而用户查找的结果是所有的记录，是多条记录。如图3所示。多条记录，使用JSON数组的形式接收。有11条记录，展开，显示每条记录的数据，和数据表里面的数据是一致的。

4.4用户显示服务器设计

用户信息是查询用户表的所有数据，查询的结果，存放在List集合里面，最后将集合的数据打包成JSON数组的格式，传回给客户端。返回的数据如图3所示。分页功能比较复杂，需要从客户端取出当前的页数、每页记录数。客户端使用post表单的方式提交，则服务器端使用context.Request[“currentPage”]的方式，取出提交的数据。如果使用get参数的方式提交，则服务器使用context.Request.QueryString[“currentPage”]。需要注意是get方式还是post方式，在服务器端，一定要取出当前页数、每页记录数，这两个重要的参数。分页查询使用limit 关键字，含义是从偏移量位置开始，取出多少条记录，因此，偏移量=（当前页数-1）*pageSize，得到偏移位置。执行sql 查询语句，select  *  from  user order by id limit 偏移量，pageSize。执行sql语句后，得到查询的结果，存放到list集合中，使用JSON工具，打包成JSON格式的数据，发送各客户端。

4.5用户更新界面设计

更新比较复杂，首先，使用Ajax从服务器接收数据，在浏览器上显示，在浏览界面上，每一条记录的前面有一个单选框或在记录的后面有一个按钮，单选钮的value保存循环的序号。其次，通过选中的单选框或按钮，将该条记录的详细信息显示出来，该界面和添加界面相似。使用循环方式，判断那个单选钮被选中，取出选中单选钮的数值，取出对应接收数据的JSON数组里面的数值，将数值赋给文本框对象，在页面上的显示。第三步，在更新界面修改数据后，使用Ajax的post方法，将数据提交到后台服务器。最后在Ajax的回调函数里面，处理服务器返回的更新数据，一般更新成功，返回1，失败，返回-1。具体返回什么数据，由后端开发人员确定。但是，一定要将返回的数据格式告诉前端开发人员。前端开发人员按照后端人员提供的数据，进行处理。前后端人员一定要有一个良好的沟通。

总结一下，更新操作，首先，使用Ajax从服务器接收数据，在浏览器上显示。其次，通过每一条记录前面的单选框或按钮，将选中的记录，显示在类似添加页面的更新界面上。第三步，在更新界面上，修改数据，使用Ajax将 提交到后台服务器。最后一步，Ajax接收服务器传回来的数据，更加传回来的数据，显示更新后的数据。

4.6用户更新服务器设计

更新后端程序的设计，首先，接收客户端传递过来的id ，根据id查找该记录，最后，将数据返回给客户端，本次客户端、服务器的通讯结束。服务器再次接收客户端传递过来的用户数据，执行更新的sql语句，处理完成。更新成功，返回包含1的JSON数据。更新失败，返回包含-1的JSON数据。更新用户表涉及两次通讯，第一次，查询id对应的用户数据，返回给客户端。第二次，接收客户端提交的用户数据，执行更新操作，更新结束，返回一个数值给客户端。

4.7用户删除界面设计

删除界面和更新界面相似，首先，使用Ajax显示整个数据表，在每一条记录的前面有一个复选框或后面有一个按钮。其次，处理所有选中的复选框，将选中记录的id打包成JSON数组格式，提交给服务器。第三，在Ajax的回调函数里面，处理服务器的返回数据，返回1，表示删除成功，在页面上显示删除以后的数据。删除失败，提示删除失败的信息。记录仍然保持不变。

4.8用户删除服务器设计

删除后端程序的設计，首先，接收客户端提交过来的id数据，是一个数组，循环调用数组里面的id，执行删除操作。再次，查找用户表，将删除后的数据表数据取出来，返回给客户端。

5结束语

网站开发技术发展非常迅速，前后端分离，框架设计，各做各的事情，前端人员专注界面设计，后端人员考虑网站的效率、安全等，通过这种方式，开发的网站效率更高，能够满足客户需求，网站更加安全。本项目通过用户登录操作，使用Ajax，实现了页面设计和后端代码的彻底分离，结构清晰，开发过程中，前端是界面设计、数据渲染、页面美观等;后端是数据的管理、数据安全防护等，方便前后端调试，相互不干扰，前后端同时开发，加快网站开发的速度。在后期网站维护过程中，方便排查错误，便于维护。

参考文献：

[1] 蔡泽铭，王文华.基于Vue.js 的信息管理系统前端架构[J].电子技术与软件工程，2020（18）：142-144.

[2] 传智播客高教产品研发部.ASP.NET就业实例教程[M].北京：人民邮电出版社，2015.

[3] 邵山欢.Jquery和Ajax实战教程[M].北京：高等教育出版社，2019.

[4] 许平顺，孙首群，严亮.基于ASP.NET的管道事故管理系统设计与实现[J].软件导刊，2021，20（4）：150-153.

[5] 马汉达，方伟，洪华剑.实验教学过程管理平台设计与实现[J].软件导刊，2021，20（5）：114-117.

[6] 徐秋榕.省级网上办事系统的需求分析[J].福建电脑，2021（37）：38-42.

【通联编辑：谢媛媛】