摘要:当前，高职学校的毕业生的就业形势比较严峻，因而保障学生就业成为学校的重要工作。就业网站是促进学生就业的一种方式。就业网站可以为学生就业提供一个平台，能够拓宽学生就业的渠道。本文构建了一个帮助学生就业的网站。网站的建设采用前后端分离技术，以express框架构成后台服务器，以Vue作为前端界面。通过axios实现前后端数据的通讯。经过一段时间的实际运行，该网站为学生找工作提供了很大帮助，达到了预期的效果。

关键词：分离技术；应用程序开发框架；就业网站

1引言

高职学生就业主要是通过学校组织的招聘会、网上投简历等方式。这种就业模式存在一定的局限性，在学生面试之前，学生、企业互不了解。因此，有必要提供一个供需平台，让学生、企业可以尽早进行沟通、了解。通过该网站平台，企业能够招聘到适合的学生，学生能够找到满意的工作。目前，网站的前后端分离开发技术比较流行，前端开发人员注重网站的布局、美化设计，后端开发人员实现网站的各种功能，提供给前端需要的各种类型的接口。这种基于前后端分离的内容管理系统为使用人员提供更加便捷的跨平台的内容管理服务[1]，提高网站的开发效率。Node和vue就是前后端分离的技术之一，本文使用Node和Vue进行项目开发。

2数据库的设计

网站开发的第一步，就是数据库的设计。MySQL作为数据存储和管理的数据库，由于其速度快、体积小，一般中小型网站的后台数据库开发都选择MySQL[2]。网站数据库主要使用数据表，视图、存储过程等较少使用。因此，数据库的设计也是数据表的设计。数据表的设计主要包括数据表字段的设置，以及需要哪些字段、字段的数据类型。数据表字段的设置一般根据查询企业信息的需求进行设计的，如需要查询企业的名称、企业的位置、企业的性质、负责人、联系电话、企业的介绍、招聘岗位、招聘人数、招聘要求等。考虑到企业数据多，因此需要对数据进行分析、分类。如果数据没有重复，则可以考虑将所有数据保存到同一张数据表里。此外，还可以将企业信息分成多张数据表。例如：将企业的基本信息做成一张数据表，企业的招聘信息做成一张数据表。根据企业数据的具体情况进行分析，设计几张数据表。如果有多张数据表，必须要注意数据表之间的关联，要能够根据一张数据表的关键字，找到另一个数据表对应的记录。关联的数据表最好不要太多，否则给设计带来非常大的麻烦。当对一张数据表的数据进行更新、删除的时候，需要考虑关联的数据表是否需要更新、删除。数据库的设计是基础、核心，本项目企业的数据表只有一个，所有企业的信息，都存放在一张数据表里面。

3企业网站后端的设计

Express是一个简洁而灵活的Node.jsWeb应用框架[3]。它通过中间件和路由使应用程序的组织和管理更加容易，提供丰富的HTTP工具，让动态视图渲染更加方便[4]。服务器必须能够连接数据库，因此，需要加载MySql。前后端分离设计，涉及浏览器的跨域问题，需要加载cors插件。表单的提交，需要加载body-parser。在实际的开发过程中，根据需要的功能，加载对应的插件。

3.1Express服务器的设计

使用Expess命令创建服务器的工作流程[5]：（1）创建Express对象。（2）创建企业数据访问路由对象，Router对象相当于一个中间件容器[6]，处理get/post等请求。（3）服务器对象加载body-parser对象、加载cors对象。（4）将企业的url访问地址与路由对象绑定，通过路由访问对应的请求。同时，一定要注意跨域对象的加载次序，必须在路由对象绑定的前面，如果次序错误，仍然会出现跨域的问题。（5）启动监听。主要代码是app.listen(0)，在0端口侦听所有客户端的连接请求。服务器启动以后，主要的操作是在路由里面。在路由模块中，根据Node.js的单线程、异步I/O、基于事件驱动的特点[7]，路由对象使用Promise，对MySql数据表进行各种操作，实现数据表的添加、浏览、更新、删除、操作等操作。

3.2实现一条数据的添加

在添加一条路由函数里面，使用req对象的body属性，取出Vue前端axios发送过来的post数据。这里，必须注意前端使用post方式发送数据，后端的路由使用req请求对象的body取出。调用自定义的数据库的对象，实现数据的添加操作。如果添加成功，则返回数值1的json数据；如果添加错误，则返回-1的json数据。

3.3多条数据的添加

取出Vue前端axios发送过来的post数据。这是一个JSON数组格式的字符串，将它转换为JSON数组对象，数组元素是一个company数据表对应的数据。可以使用insertintocompany(字段1，字段2，…字段n)values(“数值1”,“数值2”,…“数值n”),(“数值1”,“数值2”,…“数值n”),…,(“数值1”,“数值2”,…“数值n”)。使用这种方式，结合数组，循环取出读取的JSON数据，将数据添加到values对应的字段。通过这种方式，可以实现多条数据的添加。

3.4分页的设计

分页浏览主要是首页、上一页、下一页、最后一页。通过这四个按钮，实现分页功能。分页功能由两个路由函数实现。第一个路由函数使用sql的查询语句，selectcount(*)fromaskkcompany，通过sql的query函数调用，取出数据表里面的记录数。使用JSON.parse(JSON.stringify(返回值))[0].kk，取出记录数。使用res.send方法，将记录数返回给前端。第二个路由函数，使用req请求对象，取出前端发送当前页、每页记录数两个数据。要注意前端是get方法还是post方法。get方法需要使用params参数的形式发送数据。服务器的路由函数使用对应的get方法或post方法，取出数据。前后端必须使用相同的方法，否则，接收不到数据。使用select的limit方法，取得分页的记录。查询语句是select*fromcompanyorderbyidlimitoffset,pageSize。需要根据分页数，计算offset记录偏移量。offset=(当前页数-1)*pageSize。查询结果是从指定的偏移量位置，取出pageSize记录。这是多条记录。使用JSON数组的格式，将数据返回给客户端。这个返回数据的接口，必须考虑多种情况。若查询成功，则返回JSON数组给客户端；查询失败，则sql语句错误，将错误信息返回给客户端。错误类型有多种情况，如没有接收到数据、接收的分页数不是整数、sql语句写错、offset偏移量为负值等。需要对各种错误进行测试，尽量在网站运行前，解决出现的错误。

3.5删除数据的设计

普通的删除操作比较简单。根据id序号删除的，在删除路由函数里面，接收前端发送过来的要删除的记录的id，执行删除的sql语句，实现删除。可以一次删除多条记录；也可以根据除id以外的其它字段进行删除；还可以使用多个字段、组合形式的删除。如果删除成功，则返回带数值为1的json数据；如果删除失败，则返回数值为-1的json数据。相对来说，根据id删除一条记录或删除多条记录，要测试的错误少，给前端提供的接口也比较简单。

3.6更新的数据

更新数据和删除数据相似，都是在分页的页面上进行操作。使用element-ui插件，能够快速搭建表格，使用数据的绑定，非常方便地显示服务器发送的数据。在前端分页的页面上，在表格的单元格里添加按钮。在按钮的单击事件里实现路由页面的跳转，跳转到更新vue界面。在更新界面，完成该条记录的编辑。使用axios的post方式，提交数据到服务器。服务器端更新路由与添加路由相似，取出提交的数据，使用updatecompany语句，实现数据的更新操作。将更新后的信息返回给前端。同样，需要将返回数据的接口，提供给前端设计人员。

4企业网站前端设计

随着Ajax的出现，前后端分离才有实现的基础[8]。网站的前端使用Vue框架进行设计。其优点是轻量级、数据绑定、指令和插件[9]，例如：Vue通过数据的双向绑定功能，数据发生变化时，视图发生变化；视图发生变化，对应的数据也发生变化。Vue使用插件对Vue框架进行扩展，使得网站前端的开发变得简单、高效，提升了前端开发的效率。

4.1创建Vue项目

在VSCode编译器的终端里面，使用npm创建Vue项目。根据创建项目的提示步骤进行安装。使用npmrunserve启动项目。项目创建完成后，有默认的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文件。

4.2使用excel插件

数据添加的页面，使用表单控件中的文本框、按钮等进行数据添加。例如用户注册界面，就是添加界面，将页面上的数据录入完成后进行提交，才能够将数据提交到后台服务器。如果使用这种页面添加企业数据的方式，要一条记录一条记录地添加，效率慢，且在录入的数据过程中，若出现录入错误，还需要修改、重新输入。因此，当添加大量数据时候，不推荐使用这种页面录入的添加方式。Excel是专门进行数据处理的软件，方便用户对数据进行处理、编辑。首先，准备好excel数据，加载excel插件，有多种excel插件可以使用。如安装xlsx插件，安装的方式是：npminstallxlsx–save。在vue页面里面，需要使用file控件。在file控件中添加change事件。在事件对应的函数里，第一步，取出excel文件。第二步，创建FileReader对象。第三步，应用FileReader对象ReadAsBinaryString方法，读取excel文件。第四步，调用FileReader对象的异步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数据发送给服务器。使用xlsx插件对excle文件的数据进行处理非常方便。需要注意的是，一定要取出file控件的excle文件，读取文件数据成功。在FileReader对象的异步onload方法里，e.target.result参数要有数据。通过xlsx插件的read方法，创建工作簿对象，将工作表的数据取出来，转换为json格式的数据。Axios是一个基于Promise的HTTP库、用于浏览器和Node.js的HTTP客户端。Axios的异步Get/Post请求，浏览器通过Axios向服务器的URL地址提交数据[]，请求方法中，第一个参数是url，服务器的处理excel添加对应的地址；第二个参数是json数据。在axios的then方法中，有resolve成功的回调函数，有reject失败的回调函数。根据resolve回调函数的返回值判断是否成功。如果返回的数值是1，状态码是，表示数据添加成功。如果是其它数值，需要使用chrome浏览器的F12，进行调试，查找错误的原因。chrome浏览器的F12调试窗口非常重要，需要熟练掌握network网络窗口，查看url地址、参数是否正确，查看网络headers数据头。使用console控制台，查看输出的变量，一般通过打印变量来查看变量的数值，判断程序运行的流程。使用source，在js代码窗口里面设置断点，使用debug调试js程序。

4.3前端的分页设计

前端的分页设计使用element-ui，能够提高开发效率。在data里面，需要使用tablData变量，接收服务器传递过来的记录数据。记录数据有总记录数、当前页数、总页数、每页记录数等变量。第一步，在mounted挂载方法里使用axios，调用数据表总的记录数方法，取出总的记录数。根据总的记录数、每页的记录数，计算出总页数。在界面上，通过数据绑定，显示当前页、总页数等数据。第二步，在mounted挂载方法里使用axios，调用分页函数，取出第一页的数据，将数据保存在tableData数组，通过数据绑定，在表格上显示记录。第三步，在页面上添加首页、上一页、下一页、尾页四个按钮。首页函数里面，当前页为1，调用axios，将当前页、每页记录数发给服务器。上一页函数里面，判断当前页是否大于1。如果大于1，则当前页-1，将数据发送给服务器；如果不大于1，则不用发送axios，当前页为1。在下一页函数里，判断当前页是否小于总页数。如果小于总页数，则当前页+1，将数据发给服务器；如果不小于总页数，则不发送，当前页为总页数。尾页函数里面，当前页为总页数，发送数据给服务器。第四步，通过axios的then的resolve接收服务器发送过来的数据。必须使用F12的调试，打印resolve的返回值，返回数据的个数、变量的名称。将数据保存到tableData对象，实现数据的显示。

4.4前端的删除设计

在分页界面上，一次删除一条记录。在每条记录后面的单元格里，添加一个删除按钮。element-ui的表格提供一个例子，直接使用例子的按钮事件。@click=fun(scope.row)，scope.row参数就是表格选中的某一行的行号对象，取出row对象里的id数值，通过axios将id发送给服务器。接收服务器传递的数据，重新发送分页数据，然后显示删除后的数据。

4.5前端的更新设计

更新的前端设计页数在分页的页面上，添加更新按钮更新数据，一次更新一条记录。取出选中行的row参数，通过动态路由this.$router.push方法，跳转到更新页面。在更新页面，完成对数据的更新。使用axios提交数据给服务器。提交数据的过程和添加的过程相似。接收服务器传递的数据，将更新后的数据显示在页面上。

5结语

本文使用Node的express构建后台服务器，结合路由、MySql数据库插件、Excel插件等组件，构成一个后台服务器。使用Vue项目构成前端，使用axios实现前后端数据的通讯，从而实现高职学生就业网站的开发，具有一定的实际应用价值。

作者:朱克武 单位:广东食品药品职业学院