摘 要： 当前，高职学校的毕业生的就业形势比较严峻，因而保障学生就业成为学校的重要工作。就业网站是促进学生就业的一种方式。就业网站可以为学生就业提供一个平台，能够拓宽学生就业的渠道。本文构建了一个帮助学生就业的网站。网站的建设采用前后端分离技术，以express框架构成后台服务器，以Vue作为前端界面。通过axios实现前后端数据的通讯。经过一段时间的实际运行，该网站为学生找工作提供了很大帮助，达到了预期的效果。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页 关键词 : 分离技术;应用程序开发框架;就业网站;ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页 Abstract： At present, the employment situation of higher vocational school graduates is more severe, so ensuring the employment of students has become an important work of the school. Employment website is a way to promote students' employment. Employment website can provide a platform for students' employment and broaden the channels of students' employment. This paper constructs a website to help students find jobs. The construction of the website adopts the front-end and back-end separation technology, uses the express framework to form the back-end server, and uses Vue as the front-end interface. The data communication between front and back end is realized by Axios. The actual operation results of the website show that it provides great help for students to find jobs and achieves the expected effect.ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页 Keyword： Separation Technology; Application Development Framework; Employment Website;ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页 1 、引言ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
高职学生就业主要是通过学校组织的招聘会、网上投简历等方式。这种就业模式存在一定的局限性，在学生面试之前，学生、企业互不了解。因此，有必要提供一个供需平台，让学生、企业可以尽早进行沟通、了解。通过该网站平台，企业能够招聘到适合的学生，学生能够找到满意的工作。目前，网站的前后端分离开发技术比较流行，前端开发人员注重网站的布局、美化设计，后端开发人员实现网站的各种功能，提供给前端需要的各种类型的接口。这种基于前后端分离的内容管理系统为使用人员提供更加便捷的跨平台的内容管理服务[1]，提高网站的开发效率。Node和vue就是前后端分离的技术之一，本文使用Node和Vue进行项目开发。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页 2 、数据库的设计ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
网站开发的第一步，就是数据库的设计。My SQL作为数据存储和管理的数据库，由于其速度快、体积小，一般中小型网站的后台数据库开发都选择My SQL[2]。网站数据库主要使用数据表，视图、存储过程等较少使用。因此，数据库的设计也是数据表的设计。数据表的设计主要包括数据表字段的设置，以及需要哪些字段、字段的数据类型。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
数据表字段的设置一般根据查询企业信息的需求进行设计的，如需要查询企业的名称、企业的位置、企业的性质、负责人、联系电话、企业的介绍、招聘岗位、招聘人数、招聘要求等。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
考虑到企业数据多，因此需要对数据进行分析、分类。如果数据没有重复，则可以考虑将所有数据保存到同一张数据表里。此外，还可以将企业信息分成多张数据表。例如：将企业的基本信息做成一张数据表，企业的招聘信息做成一张数据表。根据企业数据的具体情况进行分析，设计几张数据表。如果有多张数据表，必须要注意数据表之间的关联，要能够根据一张数据表的关键字，找到另一个数据表对应的记录。关联的数据表最好不要太多，否则给设计带来非常大的麻烦。当对一张数据表的数据进行更新、删除的时候，需要考虑关联的数据表是否需要更新、删除。数据库的设计是基础、核心，本项目企业的数据表只有一个，所有企业的信息，都存放在一张数据表里面。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页 3 、企业网站后端的设计ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
Express是一个简洁而灵活的Node.js Web应用框架[3]。它通过中间件和路由使应用程序的组织和管理更加容易，提供丰富的HTTP工具，让动态视图渲染更加方便[4]。服务器必须能够连接数据库，因此，需要加载My Sql。前后端分离设计，涉及浏览器的跨域问题，需要加载cors插件。表单的提交，需要加载body-parser。在实际的开发过程中，根据需要的功能，加载对应的插件。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
3.1、 Express服务器的设计ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
使用Expess命令创建服务器的工作流程[5]:(1）创建Express对象。（2）创建企业数据访问路由对象，Router对象相当于一个中间件容器[6]，处理get/post等请求。（3）服务器对象加载body-parser对象、加载cors对象。（4）将企业的url访问地址与路由对象绑定，通过路由访问对应的请求。同时，一定要注意跨域对象的加载次序，必须在路由对象绑定的前面，如果次序错误，仍然会出现跨域的问题。（5）启动监听。主要代码是app.listen(3000)，在3000端口侦听所有客户端的连接请求。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
服务器启动以后，主要的操作是在路由里面。在路由模块中，根据Node.js的单线程、异步I/O、基于事件驱动的特点[7]，路由对象使用Promise，对My Sql数据表进行各种操作，实现数据表的添加、浏览、更新、删除、操作等操作。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
3.2 、实现一条数据的添加ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
在添加一条路由函数里面，使用req对象的body属性，取出Vue前端axios发送过来的post数据。这里，必须注意前端使用post方式发送数据，后端的路由使用req请求对象的body取出。调用自定义的数据库的对象，实现数据的添加操作。如果添加成功，则返回数值1的json数据；如果添加错误，则返回-1的json数据。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
3.4、 分页的设计ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
分页浏览主要是首页、上一页、下一页、最后一页。通过这四个按钮，实现分页功能。分页功能由两个路由函数实现。第一个路由函数使用sql的查询语句，，通过sql的query函数调用，取出数据表里面的记录数。使用stringify(返回值))[0].kk，取出记录数。使用res.send方法，将记录数返回给前端。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
第二个路由函数，使用req请求对象，取出前端发送当前页、每页记录数两个数据。要注意前端是get方法还是post方法。get方法需要使用p参数的形式发送数据。服务器的路由函数使用对应的get方法或post方法，取出数据。前后端必须使用相同的方法，否则，接收不到数据。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
使用sect的limit方法，取得分页的记录。查询语句是Size。需要根据分页数，计算offset记录偏移量。offset=(当前页数-1)*page Size。查询结果是从指定的偏移量位置，取出page Size记录。这是多条记录。使用JSON数组的格式，将数据返回给客户端。这个返回数据的接口，必须考虑多种情况。若查询成功，则返回JSON数组给客户端；查询失败，则sql语句错误，将错误信息返回给客户端。错误类型有多种情况，如没有接收到数据、接收的分页数不是整数、sql语句写错、offset偏移量为负值等。需要对各种错误进行测试，尽量在网站运行前，解决出现的错误。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
3.5 、删除数据的设计ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
普通的删除操作比较简单。根据id序号删除的，在删除路由函数里面，接收前端发送过来的要删除的记录的id，执行删除的sql语句，实现删除。可以一次删除多条记录；也可以根据除id以外的其它字段进行删除；还可以使用多个字段、组合形式的删除。如果删除成功，则返回带数值为1的json数据；如果删除失败，则返回数值为-1的json数据。相对来说，根据id删除一条记录或删除多条记录，要测试的错误少，给前端提供的接口也比较简单。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
3.6、 更新的数据ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
更新数据和删除数据相似，都是在分页的页面上进行操作。使用element-ui插件，能够快速搭建表格，使用数据的绑定，非常方便地显示服务器发送的数据。在前端分页的页面上，在表格的单元格里添加按钮。在按钮的单击事件里实现路由页面的跳转，跳转到更新vue界面。在更新界面，完成该条记录的编辑。使用axios的post方式，提交数据到服务器。服务器端更新路由与添加路由相似，取出提交的数据，使用update company语句，实现数据的更新操作。将更新后的信息返回给前端。同样，需要将返回数据的接口，提供给前端设计人员。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页 4 、企业网站前端设计ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
随着Ajax的出现，前后端分离才有实现的基础[8]。网站的前端使用Vue框架进行设计。其优点是轻量级、数据绑定、指令和插件[9]，例如：Vue通过数据的双向绑定功能，数据发生变化时，视图发生变化；视图发生变化，对应的数据也发生变化。Vue使用插件对Vue框架进行扩展，使得网站前端的开发变得简单、高效，提升了前端开发的效率。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
4.1 、创建Vue项目ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
在VS Code编译器的终端里面，使用npm创建Vue项目。根据创建项目的提示步骤进行安装。使用npm run serve启动项目。项目创建完成后，有默认的home.vue、about.vue两个文件模板。对App.vue进行修改，删除模板中的默认内容，保留router-view，用于Vue的视图显示。Vue开发的主要内容之一是创建Vue文件。新建的Vue文件由template、script、style三部分组成[2]。template是界面，用于页面的布局；script是js脚本控制；style是界面的样式。在路由文件里面，设置创建的vue文件，实现vue文件在浏览器上的显示。因此，Vue开发的一个核心内容，是创建vue文件。在路由文件里面，配置创建的vue文件。项目启动后，在浏览器上，能够显示vue文件。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
4.2、 使用excel插件ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
数据添加的页面，使用表单控件中的文本框、按钮等进行数据添加。例如用户注册界面，就是添加界面，将页面上的数据录入完成后进行提交，才能够将数据提交到后台服务器。如果使用这种页面添加企业数据的方式，要一条记录一条记录地添加，效率慢，且在录入的数据过程中，若出现录入错误，还需要修改、重新输入。因此，当添加大量数据时候，不推荐使用这种页面录入的添加方式。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
Excel是专门进行数据处理的软件，方便用户对数据进行处理、编辑。首先，准备好excel数据，加载excel插件，有多种excel插件可以使用。如安装xlsx插件，安装的方式是：npm install xlsx–save。在vue页面里面，需要使用file控件。在file控件中添加change事件。在事件对应的函数里，第一步，取出excel文件。第二步，创建File Reader对象。第三步，应用File Reader对象Read As Binary String方法，读取excel文件。第四步，调用File Reader对象的异步onload方法，重点是onlaod方法的参数e.target.result，参数的target对象的result属性。如果excel文件读取成功，则result有很多数据。如果读取失败，则result有少量的数据。第五步，引入xlsx对象，使用该对象的read方法，读取result，转换为excel工作簿对象。第六步，通过工作簿对象的utils.sheet＿to＿json方法，将工作表里面的数据，转换为json格式的数据，将excel数据读取出来。第七步，将json数据存放到data的变量中。第八步，调用axios的post方法，将json数据发送给服务器。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
使用xlsx插件对excle文件的数据进行处理非常方便。需要注意的是，一定要取出file控件的excle文件，读取文件数据成功。在File Reader对象的异步onload方法里，e.target.result参数要有数据。通过xlsx插件的read方法，创建工作簿对象，将工作表的数据取出来，转换为json格式的数据。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
Axios是一个基于Promise的HTTP库、用于浏览器和Node.js的HTTP客户端。Axios的异步Get/Post请求，浏览器通过Axios向服务器的URL地址提交数据[10]，请求方法中，第一个参数是url，服务器的处理excel添加对应的地址；第二个参数是json数据。在axios的then方法中，有resolve成功的回调函数，有reject失败的回调函数。根据resolve回调函数的返回值判断是否成功。如果返回的数值是1，状态码是200，表示数据添加成功。如果是其它数值，需要使用chrome浏览器的F12，进行调试，查找错误的原因。chrome浏览器的F12调试窗口非常重要，需要熟练掌握network网络窗口，查看url地址、参数是否正确，查看网络headers数据头。使用console控制台，查看输出的变量，一般通过打印变量来查看变量的数值，判断程序运行的流程。使用source，在js代码窗口里面设置断点，使用debug调试js程序。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
4.3 、前端的分页设计ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
前端的分页设计使用element-ui，能够提高开发效率。在data里面，需要使用tabl Data变量，接收服务器传递过来的记录数据。记录数据有总记录数、当前页数、总页数、每页记录数等变量。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
第一步，在mounted挂载方法里使用axios，调用数据表总的记录数方法，取出总的记录数。根据总的记录数、每页的记录数，计算出总页数。在界面上，通过数据绑定，显示当前页、总页数等数据。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
第二步，在mounted挂载方法里使用axios，调用分页函数，取出第一页的数据，将数据保存在table Data数组，通过数据绑定，在表格上显示记录。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
第三步，在页面上添加首页、上一页、下一页、尾页四个按钮。首页函数里面，当前页为1，调用axios，将当前页、每页记录数发给服务器。上一页函数里面，判断当前页是否大于1。如果大于1，则当前页-1，将数据发送给服务器；如果不大于1，则不用发送axios，当前页为1。在下一页函数里，判断当前页是否小于总页数。如果小于总页数，则当前页+1，将数据发给服务器；如果不小于总页数，则不发送，当前页为总页数。尾页函数里面，当前页为总页数，发送数据给服务器。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
第四步，通过axios的then的resolve接收服务器发送过来的数据。必须使用F12的调试，打印resolve的返回值，返回数据的个数、变量的名称。将数据保存到table Data对象，实现数据的显示。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
4.4 、前端的删除设计ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
在分页界面上，一次删除一条记录。在每条记录后面的单元格里，添加一个删除按钮。element-ui的表格提供一个例子，直接使用例子的按钮事件。@click=fun(scope.row),scope.row参数就是表格选中的某一行的行号对象，取出row对象里的id数值，通过axios将id发送给服务器。接收服务器传递的数据，重新发送分页数据，然后显示删除后的数据。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
4.5、 前端的更新设计ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
更新的前端设计页数在分页的页面上，添加更新按钮更新数据，一次更新一条记录。取出选中行的row参数，通过动态路由this.$router.push方法，跳转到更新页面。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
在更新页面，完成对数据的更新。使用axios提交数据给服务器。提交数据的过程和添加的过程相似。接收服务器传递的数据，将更新后的数据显示在页面上。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页 5 、结语ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
本文使用Node的express构建后台服务器，结合路由、My Sql数据库插件、Excel插件等组件，构成一个后台服务器。使用Vue项目构成前端，使用axios实现前后端数据的通讯，从而实现高职学生就业网站的开发，具有一定的实际应用价值。ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页 参考文献ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
[1]孙娉娉,李新基于前后端分离的内容管理系统科研信息化技术与应用2016,7(04):70-75ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
[2]朱晓阳，刘宛如基于Node js的学习平台后端系统设计与实现电脑知识与技术,2019,15(3):116-118ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
[3]王伶俐张伟国基于Node. js+Express框架的轻应用定制平台的设计与实现计算机科学,2017 ,44(S2):596-599ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
[4]钟小平Node js开发实战教程北京人民邮电出版社,2020ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
[5]崔莹,刘兵. Node.js与Express技术在计算机课程教学中的应用软件导刊,2016, 15(09):190-192ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
[6]程桂花,沈伟等. Node .js中Express框架路由机制的研究工业控制计算机,2016,29(08)-101-102ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
[7]张艳,吴晓翔基于Node js的前端教程网站设计与开发福建电脑,2021,20(4): 150-153ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
[8]蔡泽铭，王文华基于Vue jis的信息管理系统前端架构.电子技术与软件I程，2020(18):142-144ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
[9]刘汉伟.Vue js从入门到项目实战北京:清华大学出版社,2020ZCo最新博雅德州客户端_首页 ZCo最新博雅德州客户端_首页
[10]肖睿龙颖. Vue企业开发实战北京:人民邮电出版社,2021
