目录
一、项目介绍
二、项目的搭建
1.vite的安装
2.启动vite项目
3.vant4的引入与使用
3.1安装指令
npm i vant
3.2引入vant4
4.路由router的引入
4.1安装指令
4.2路由配置
5.路径别名设置
6.json-server
6.1json-server安装
6.2json-server启动项配置
6.3启动命令：npm run mock
7.axios请求数据
7.1安装axios依赖
7.2简单封装axios
7.3项目使用axios
三、登录注册模块
1.登录页面
2.注册页面
3.修改密码
4.开始页面
四、用户端模块
1.职位模块
1.1职位详情页面
2.求职申请页面
2.1求职申请详情页
3.我的页面
3.1我的页面信息修改
3.2我的在线简历页面
3.3我的意见反馈模块
四、总结
一、项目介绍
一款在线招聘App，有四个模块分别为登录注册模块、用户端模块、企业端模块、管理员模块
二、项目的搭建
1.vite的安装
# npm 6.x npm init vite@latest my-vue-app –template vue # npm 7+, 需要额外的双横线： npm init vite@latest my-vue-app — –template vue 
2.启动vite项目
指令：npm run dev
3.vant4的引入与使用
vant4是轻量、可定制的移动端 Vue 组件库
3.1安装指令
npm i vant
3.2引入vant4
main.js
import { createApp } from 'vue'import './style.css'import App from './App.vue'import vant from 'vant';import { Icon } from 'vant';import 'vant/lib/index.css';// 导入router配置文件import router from "./router"// 导入阿里图标import './assets/font/iconfont.css'// 导入vueximport store from './store'createApp(App).use(router).use(vant).use(Icon).use(store).mount('#app')4.路由router的引入
4.1安装指令
npm install vue-router@4
4.2路由配置
router/index.js
//1. 导入vue-router相关函数import { createRouter, createWebHashHistory } from "vue-router"// 2.路由规则const routes = [ { path:"路由地址", name:"路由名称", component:组件名称}]// 3.路由对象实例化const router = createRouter({history: createWebHashHistory(),routes})// 暴露导出export default routermain.js
import { createApp } from 'vue'import './style.css'import App from './App.vue'import vant from 'vant';import { Icon } from 'vant';import 'vant/lib/index.css';// 导入router配置文件import router from "./router"// 导入阿里图标import './assets/font/iconfont.css'// 导入vueximport store from './store'createApp(App).use(router).use(vant).use(Icon).use(store).mount('#app')5.路径别名设置
vite.config.js 文件
import vue from '@vitejs/plugin-vue'import { defineConfig } from 'vite'import WindiCSS from 'vite-plugin-windicss'// 1.导入node的path路径模块import path from "path"// https://vitejs.dev/config/export default defineConfig({ resolve: {alias: { // 配置别名 "~": path.resolve(__dirname, "src")} }})6.json-server
6.1json-server安装
npm install json-server
6.2json-server启动项配置
在src的同级目录先创建文件夹mock，并创建mock/db.json文件,添加数据
{"infomation": [{"id": 1,"title": "json-server 的第1条数据","desc": "奥特曼不想打小怪兽，明明可以做好朋友的","author": "被奥特曼打了很久的怪兽"},{"id": 2,"title": "json-server 的第2条数据","desc": "葫芦娃不想去救爷爷，一个一个的去送不好","author": "种出七个葫芦的爷爷"},{"id": 1,"title": "json-server 的第一条数据","desc": "王者荣耀其实不是很好玩，这并不是我内心的真话","author": "想玩游戏的我"}],"infomation2": [{"id": 11,"title": "json-server 的第11条数据","desc": "奥特曼不想打小怪兽，明明可以做好朋友的","author": "被奥特曼打了很久的怪兽"},{"id": 12,"title": "json-server 的第12条数据","desc": "葫芦娃不想去救爷爷，一个一个的去送不好","author": "种出七个葫芦的爷爷"},{"id": 12,"title": "json-server 的第13条数据","desc": "王者荣耀其实不是很好玩，这并不是我内心的真话","author": "想玩游戏的我"}]}（举例数据）
6.3启动命令：npm run mock
7.axios请求数据
7.1安装axios依赖
npm install axios
7.2简单封装axios
在src文件在下创建utils文件夹，在utils里创建 http.js文件
//引入安装好的axios插件import axios from "axios";// 查询数据const get = (url) => {return axios.get(url);};// 添加数据const post = (url, data) => {return axios.post(url, data);};// 修改数据const put = (url, data) => {return axios.put(url, data);};// 局部修改const patch = (url, data) => {return axios.patch(url, data);};// 删除数据const del = (url) => {return axios.delete(url);};//将二次封装好的axios导出export { get, post, put, del, patch };7.3项目使用axios
项目的端口为8080,然后json文件的端口为3000，这样就会涉及到跨域，解决跨域的方式很多种，此处讲解一下配置proxy代理 在根目录下创建文件vue.config.js，覆盖webpack的一些内容。
vite.config.js
server: {proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}三、登录注册模块
1.登录页面
代码：
提交注册新用户找回密码其他登录方式import { reactive, ref } from "vue";import { get, post, put, del } from "~/axios/http";import { showDialog } from "vant";// 本地图片引入import img from "../../assets/images/avatar.svg";// 导入useRouter方法import { useRouter } from "vue-router";const router = useRouter();// 返回上一页const onClickLeft = () => {router.go(-1);};// 表单const username = ref("");const password = ref("");//点击登录按钮事件async function onSubmit(values) {console.log(values);//axios调用json-server数据let res = await get("/api/infomation");//foreach循环判断填入的手机号和密码是否正确res.data.forEach((element) => {if (element.iphone == values.username &&element.password == values.password) {//本地存储数据的id值localStorage.setItem("key", JSON.stringify(element.id));router.push("/start");throw new Error();} else {username.value = "";password.value = "";}});}.login {width: 100%;margin-top: 22.6667vw;}.login img {margin-left: 50vw;transform: translate(-50%, 0);}.find {display: flex;width: 70%;margin: 0 auto;justify-content: space-between;}.find span {color: #0079fe;}.ways {width: 80%;margin: 7.6667vw auto;text-align: center;}.ways > span {display: block;margin-bottom: 5.3333vw;color: #999999;}.ways div {display: flex;width: 80%;margin: 0 auto;justify-content: space-around;}.ways div span {font-size: 8.3333vw;}效果图：
登录模块静态页面主要使用vant4组件库中的组件，主要实现了通过vant表单的数据提交和axios方法获取本地数据来判断手机号与密码是否正确。同时成功就通过路由跳转
2.注册页面
代码：
发送验证码同意《用户服务协议》注册已有账号,立即登录import { reactive, ref } from "vue";import { get, post, put, del } from "~/axios/http";import { showDialog } from "vant";// 本地图片引入import img from "../../assets/images/avatar.svg";// 导入useRouter方法import { useRouter } from "vue-router";const router = useRouter();// 返回上一页const onClickLeft = () => {router.go(-1);};// 表单const username = ref("");const captcha = ref("");const password = ref("");const passwordT = ref("");const checked = ref(true);async function onSubmit(values) {//两次输入密码一致if (values.password == values.passwordT) {let res = await get("/api/infomation");console.log(res);res.data.some((element) => {if (element.iphone == values.username) {showDialog({title: "提示",message: "手机号已被注册",});} else if (values.password.length < 6 && values.passwordT.length < 6) {showDialog({title: "提示",message: "密码不低于六位",});} else {//增加数据let res3 = post("/api/infomation", {iphone: values.username,password: values.password,name: "",gender: "",state: "",degree: "",num1: [],num2: [],num3: [],num4: [],num5:[],num6:[],num7:[],img:""});router.push("/login");throw new Error();}});} else {showDialog({title: "提示",message: "确定密码跟密码不一致",});}}.login {width: 100%;margin-top: 12.6667vw;}.login img {margin-left: 50vw;transform: translate(-50%, 0);}.find {width: 70%;margin: 0 auto;}.find span {display: block;width: 100%;color: #0079fe;text-align: center;}.ways {width: 80%;margin: 7.6667vw auto;text-align: center;}.ways > span {display: block;margin-bottom: 5.3333vw;color: #999999;}.ways div {display: flex;width: 80%;margin: 0 auto;justify-content: space-around;}.ways div span {font-size: 8.3333vw;}a {color: #0079fe;}效果图：
注册模块静态页面主要使用vant4组件库中的组件，主要实现了通过vant表单的数据提交和axios方法获取本地数据来判断两次密码是否一致，一致就通过axios增加本地数据。验证码功能未实现
3.修改密码
代码：
发送验证码下一步import { get, post, put, del } from "~/axios/http";import { showDialog } from "vant";import { ref } from "vue";// 导入useRouter方法import { useRouter } from "vue-router";const router = useRouter();// 返回上一页const onClickLeft = () => {router.go(-1);};// 表单const username = ref("");const password = ref("");async function onSubmit(values) {let res = await get("/api/infomation");res.data.forEach((element) => {if (element.iphone == values.username) {//传出id值router.push({path: "/revise",query: {id: element.id,},});throw new Error();} else {username.value = "";password.value = "";}});} 提交import { get, post, put, del,patch } from "~/axios/http";import { showDialog } from "vant";import { ref, reactive } from "vue";// 导入useRouter方法import { useRouter, useRoute } from "vue-router";const router = useRouter();const route = useRoute();// 返回上一页const onClickLeft = () => {router.go(-1);};// 表单const password = ref("");const passwordT = ref("");async function onSubmit(values) {//route方法传入id值let data = reactive({id: route.query.id,});if (values.password.length < 6 && values.passwordT.length < 6) {showDialog({title: "提示",message: "密码不低于六位",});} else if (values.password == values.passwordT) {let res2 = await get(`/api/infomation/${data.id}`);let res = await patch(`/api/infomation/${data.id}`, {password: values.password,});showDialog({title: "提示",message: "修改成功",});router.push("/login");} else {showDialog({title: "提示",message: "两次密码不一致",});}}效果图：
修改密码由两个页面组成，通过输入手机号用axios得到本地数据才能进入修改密码页面，同时通过router方法传进一个id值同时用route方法接受id值，修改指定账号的密码
4.开始页面
代码：
我是求职者我是招聘者我是管理员// 导入useRouter方法import { useRouter } from "vue-router";const router = useRouter();// 返回上一页const onClickLeft = () => {router.go(-1);};// 跳转用户端const runUser = () => {router.push("/user");};//跳转企业端const runEnterprise = () => {router.push("/tabber");};.user {background-color: rgba(0, 121, 254, 1);width: 80%;height: 18.6667vw;border-radius: 1.3333vw;color: #fff;text-align: center;line-height: 18.6667vw;margin: 10.3333vw auto;margin-top: 23.3333vw;}.enterprise {background-color: rgba(75, 216, 99, 1);width: 80%;height: 18.6667vw;border-radius: 1.3333vw;color: #fff;text-align: center;line-height: 18.6667vw;margin: 10.3333vw auto;}.admin {background-color: rgba(254, 148, 0, 1);width: 80%;height: 18.6667vw;border-radius: 1.3333vw;color: #fff;text-align: center;line-height: 18.6667vw;margin: 10.3333vw auto;}效果图：
该页面主要进行三个端口的跳转，通过router路由的push方法进行路由跳转
四、用户端模块
分为职位、求职申请、我的三个主页面
1.职位模块
代码：
{{ item }}筛选{{ item.name }}{{ item.money }}{{ item.city }}|{{ item.time }}|{{ item.degree }}{{ item.company }}{{ item.people }}{{ item.name }}{{ item.money }}{{ item.city }}|{{ item.time }}|{{ item.degree }}{{ item.company }}{{ item.people }}import { get, post, put, del } from "~/axios/http";import { reactive, ref, computed } from "vue";import { useRouter, useRoute } from "vue-router";const router = useRouter();const route = useRoute();const value = ref("");const arr = ref(["推荐", "热门职位"]);const nowIndex = ref(0);const change = (index) => {nowIndex.value = index;};const arr1 = ref([]);async function sendRequest() {let res = await get("/api/infomation2");arr1.value = res.data;}sendRequest();async function onSearch(val) {console.log(val);//模糊搜索let res2 = await get(`/api/infomation2" />.body {background-color: #f2f2f2;}.classify {display: flex;width: 100%;align-items: center;margin: 0 auto;justify-content: space-around;background-color: #fff;}.classify div {width: 70%;}.classify div span:nth-child(1) {margin-right: 5.3333vw;}.active {color: #0079fe;}.mainstay {padding-bottom: 13.3333vw;}.main {background-color: #fff;overflow: hidden;margin-bottom: 2.6667vw;}.main div:nth-child(1) {display: flex;width: 90%;margin: 0 auto;justify-content: space-between;margin-top: 2.6667vw;}.main div:nth-child(1) span:nth-child(2) {font-size: 5.3333vw;color: #0079fe;}.main div:nth-child(2) {margin: 1.6667vw 0;margin-left: 4.8333vw;}.main div:nth-child(2) span {margin: 0 0.8vw;color: #e4e4e4;}.main div:nth-child(3) {margin-left: 4.8333vw;margin-top: 1.6667vw;margin-bottom: 4vw;}.main div:nth-child(3) span:nth-child(1) {margin-right: 5.3333vw;}效果图：
该页面主要通过v-for进行数据遍历，axios.get方法进行数据引用、搜索栏静态效果主要用vant4组件，模糊搜索用了await get(`/api/infomation2″ />1.1职位详情页面
代码：
{{ arr.name }}{{ arr.money }}{{ arr.city }}|{{ arr.time }}|{{ arr.degree }}职位描述{{ arr.introduce }}
公司简介{{ arr.company }}{{ arr.people }}{{ arr.description }}
{{ a }}投递简历import { get, post, put, del, patch } from "~/axios/http";import { showDialog } from "vant";import { ref, reactive } from "vue";// 导入useRouter方法import { useRouter, useRoute } from "vue-router";const router = useRouter();const route = useRoute();// 返回上一页const onClickLeft = () => {router.go(-1);};const arr = ref({});const a = ref("");async function find() {let data = reactive({id: route.query.id,});let res2 = await get(`/api/infomation2/${data.id}`);arr.value = res2.data;a.value = res2.data.interest;}find();const flag = ref(true);async function change() {flag.value = !flag.value;if (flag.value == true) {a.value = "感兴趣";let data = reactive({id: route.query.id,});let res7 = await patch(`/api/infomation2/${data.id}`, {like: "0",interest: "感兴趣",});let id = ref(localStorage.getItem("key"));let res10 = await get(`/api/infomation/${id.value}`);res10.data.num3.pop(Number(data.id));let res11 = await patch(`/api/infomation/${id.value}`, {num3: res10.data.num3,});} else {a.value = "取消感兴趣";let data = reactive({id: route.query.id,});let res5 = await patch(`/api/infomation2/${data.id}`, {like: "1",interest: "取消感兴趣",});let id = ref(localStorage.getItem("key"));let res12 = await get(`/api/infomation/${id.value}`);res12.data.num3.push(Number(data.id));let res13 = await patch(`/api/infomation/${id.value}`, {num3: res12.data.num3,});}}async function td() {let data = reactive({id: route.query.id,});let res3 = await patch(`/api/infomation2/${data.id}`, {state: "投递成功",});let id = ref(localStorage.getItem("key"));let res8 = await get(`/api/infomation/${id.value}`);res8.data.num1.push(Number(data.id));let res9 = await patch(`/api/infomation/${id.value}`, {num1: res8.data.num1,});}.name {width: 90%;margin: 0 auto;display: flex;flex-direction: column;border-bottom: 2px solid #e4e4e4;border-top: 2px solid #e4e4e4;padding-bottom: 2.6667vw;}.name > span:nth-child(1) {font-weight: bold;margin: 2.6667vw 0;}.name > span:nth-child(2) {font-size: 5.3333vw;color: #09ba72;margin-bottom: 2.6667vw;}.name > div span {margin-right: 1.3333vw;}.introduce {width: 90%;margin: 0 auto;padding-top: 2.6667vw;border-bottom: 2px solid #e4e4e4;}.introduce span {font-weight: bold;}.company {width: 90%;margin: 0 auto;padding-top: 2.6667vw;border-bottom: 2px solid #e4e4e4;display: flex;flex-direction: column;margin-bottom: 10.3333vw;}.company > span:nth-child(1) {font-weight: bold;margin: 2.6667vw 0;}.company div span:nth-child(1) {margin-right: 5.3333vw;}.bt {width: 80%;display: flex;margin: 0 auto;justify-content: space-between;}.bt .van-button {width: 35vw !important;}效果图：
该页面通过职位页面router路由query传值方法接收不同id值，再通过axios方法获取json-server不同id值的数据从而实现数据动态交互。同时页面数据同样通过axios.get方式获取数据渲染页面。按钮感兴趣与投递简历都能实现数据的传递
2.求职申请页面
代码：
{{ item.name }} {{ item.state }}{{ item.money }}{{ item.introduce }}import { get, post, put, del, patch } from "~/axios/http";import { ref, reactive } from "vue";import { useRouter, useRoute } from "vue-router";const router = useRouter();const route = useRoute();const nav = ref(["投递成功","被查看","面试待确认","已约面试","不合适","有意向","已录用",]);const arr = ref([]);const arr1 = ref([]);async function sendRequest() {let id = ref(localStorage.getItem("key"));let res1 = await get(`/api/infomation" /> {router.push({path: "/requestDetail",query: {id: value,},});};.all {background-color: #f2f2f2;margin-bottom: 12vw;}.body {width: 100%;margin-bottom: 2.6667vw;background-color: #fff;overflow: hidden;}.name {display: flex;justify-content: space-between;width: 90%;margin: 1.6vw auto;}.name span:nth-child(2) {color: #ff9933;}.money {width: 90%;margin: 0 auto;}.introduce {width: 90%;margin: 1.6vw auto;}效果图
该页面通过json-server数据对岗位状态进行分别展示，通过v-show进行不同状态的不同岗位展示
同时不同用户显示自己的参与的岗位状态实现数据的动态显示。
2.1求职申请详情页
{{ arr.name }}{{ arr.money }}{{ arr.city }}|{{ arr.time }}|{{ arr.degree }}职位描述{{ arr.introduce }}
公司简介{{ arr.company }}{{ arr.people }}{{ arr.description }}
import { get, post, put, del } from "~/axios/http";import { showDialog } from "vant";import { ref, reactive } from "vue";// 导入useRouter方法import { useRouter, useRoute } from "vue-router";const router = useRouter();const route = useRoute();// 返回上一页const onClickLeft = () => {router.go(-1);};const arr = ref({});async function find() {let data = reactive({id: route.query.id,});let res2 = await get(`/api/infomation2/${data.id}`);arr.value = res2.data;console.log(arr.value);}find();.name {width: 90%;margin: 0 auto;display: flex;flex-direction: column;border-bottom: 2px solid #e4e4e4;border-top: 2px solid #e4e4e4;padding-bottom: 2.6667vw;}.name > span:nth-child(1) {font-weight: bold;margin: 2.6667vw 0;}.name > span:nth-child(2) {font-size: 5.3333vw;color: #09ba72;margin-bottom: 2.6667vw;}.name > div span {margin-right: 1.3333vw;}.introduce {width: 90%;margin: 0 auto;padding-top: 2.6667vw;border-bottom: 2px solid #e4e4e4;}.introduce span {font-weight: bold;}.company {width: 90%;margin: 0 auto;padding-top: 2.6667vw;border-bottom: 2px solid #e4e4e4;display: flex;flex-direction: column;margin-bottom: 10.3333vw;}.company > span:nth-child(1) {font-weight: bold;margin: 2.6667vw 0;}.company div span:nth-child(1) {margin-right: 5.3333vw;}效果图：
该页面通过职位页面router路由query传值方法接收不同id值，再通过axios方法获取json-server不同id值的数据从而实现数据动态交互。同时页面数据同样通过axios.get方式获取数据渲染页面。
3.我的页面
代码：
请填写个人信息{{ item.name }} 
{{ item.name }}{{ item.number }}{{ item.name }}= 1"/>退出登录// 本地图片引入import img from "../../../assets/images/u616.png";import { get, post, put, del, patch } from "~/axios/http";import { ref } from "vue";// 导入useRouter方法import { useRouter } from "vue-router";const router = useRouter();// 返回上一页const onClickLeft = () => {router.go(-1);};// 跳转个人信息修改const revise = () => {router.push("/information");};// 跳转详情页const run = (val) => {router.push(val);};const me = ref([{name: "",url: img,},]);const num1 = ref();const num2 = ref();const num3 = ref([]);const num4 = ref();async function num() {let res1 = await get("/api/infomation2" /> {router.push("/information");};async function exit() {let res5 = await get("/api/infomation2");res5.data.forEach(async function (element) {if (element.state == "投递成功") {let res6 = await patch(`/api/infomation2/${element.id}`, {state: "",});} else if (element.state == "已约面试") {let res7 = await patch(`/api/infomation2/${element.id}`, {state: "",});} else if (element.like == "1") {let res8 = await patch(`/api/infomation2/${element.id}`, {like: "0",});}router.push("/login");});}.body {background-color: #f2f2f2;height: 100vh;}.name {background-color: #f59a23;width: 100%;}.before {width: 100%;height: 26.6667vw;background-color: cornflowerblue;text-align: center;font-size: 4.3333vw;line-height: 26.6667vw;color: #775a34;}.message {display: flex;justify-content: space-between;align-content: center;width: 90%;margin: 0 auto;padding-top: 2.6667vw;}.message img {height: 18.6667vw;}.message span {line-height: 21.3333vw;color: #fce6c8;font-size: 4.2667vw;}.number {display: flex;width: 90%;margin: 5.3333vw auto;justify-content: space-around;}.number div {display: flex;flex-direction: column;align-items: center;color: #fce6c8;margin-bottom: 5.3333vw;}.number div span:nth-child(1) {margin-bottom: 2.6667vw;}.function {width: 100%;}.function > div {width: 100%;display: flex;justify-content: space-between;height: 13.3333vw;background-color: #fff;margin-bottom: 2.6667vw;align-items: center;}.function > div span {margin-left: 2.6667vw;}.function > div div {margin-right: 2.6667vw;}img {border-radius: 50%;width: 18.3333vw;}效果图：
该页面名字头像实现动态改变同时已投递、已面试、感兴趣都能通过职位的状态改变发生改变，功能模块通过router.push跳转。
3.1我的页面信息修改
代码：
提交// 导入useRouter方法import { useRouter } from "vue-router";const router = useRouter();// 返回上一页const onClickLeft = () => {router.go(-1);};import { ref } from "vue";import { get, post, put, del, patch } from "~/axios/http";const imgUrl = ref([{ url: "" }]);const emile = ref("");const name = ref("");async function onSubmit(values) {console.log("submit", values);console.log(values.uploader[0].content);let id = ref(localStorage.getItem("key"));let res = await patch(`/api/infomation/${id.value}`, {img: values.uploader[0].content,name: values.name,gender: values.fieldValue,state: values.fieldValueTwo,degree: values.fieldValueThree,});router.push("/Me/me");}const afterRead = (file) => {// 此时可以自行将文件上传至服务器console.log(file);};const columns = [{ text: "男", value: "Boy" },{ text: "女", value: "Girl" },];const fieldValue = ref("");const showPicker = ref(false);const onConfirm = ({ selectedOptions }) => {showPicker.value = false;fieldValue.value = selectedOptions[0].text;};const columnsTwo = [{ text: "在职", value: "in" },{ text: "离职", value: "out" },];const fieldValueTwo = ref("");const showPickerTwo = ref(false);const onConfirmTwo = ({ selectedOptions }) => {showPickerTwo.value = false;fieldValueTwo.value = selectedOptions[0].text;};const columnsThree = [{ text: "初中", value: "secondary" },{ text: "高中", value: "high" },{ text: "中专", value: "technical" },{ text: "大专", value: "junior" },{ text: "本科", value: "undergraduate" },{ text: "硕士", value: "msc" },{ text: "博士", value: "dr" },];const fieldValueThree = ref("");const showPickerThree = ref(false);const onConfirmThree = ({ selectedOptions }) => {showPickerThree.value = false;fieldValueThree.value = selectedOptions[0].text;};效果图：
该页面通过vant4组件获取表单值，通过axios.patch修改数据
3.2我的在线简历页面
代码：
基础信息{{ arr.name }}{{ arr.gender }}|{{ arr.degree }}|{{ arr.iphone }}求职意向职能：{{ value.name }}{{ value.money }}工作地点：{{ value.place }}工作经验（实习经验）{{ item.firm }} {{ item.posts }}{{ item.time }}内容：{{ item.content }}
教育经历{{ item.school }} {{ item.time }}{{ item.subject }}{{ item.degree }}import { get, post, put, del, patch } from "~/axios/http";import { ref } from "vue";import img from "../../../assets/images/u616.png";// 导入useRouter方法import { useRouter, useRoute } from "vue-router";const router = useRouter();// 返回上一页const onClickLeft = () => {router.go(-1);};const arr = ref([]);const arr1 = ref([]);const arr2 = ref([]);const arr3 = ref([]);async function message() {let id = ref(localStorage.getItem("key"));let res = await get(`/api/infomation/${id.value}`);arr.value = res.data;arr1.value = res.data.num4;console.log(res.data.num5);arr2.value = res.data.num5;arr3.value = res.data.num6;}message();const addIntention = () => {router.push("/intent");};const addExperience = () => {router.push("/experience");};const addEducated = () => {router.push("/degree");};const runTwo = (val) => {console.log(val);router.push({path: "/intentTwo",query: {index: val,},});};.body {background-color: #f2f2f2;}.message {width: 100%;padding-top: 2.6667vw;background-color: #fff;margin-bottom: 4vw;padding-bottom: 2.6667vw;}.message > span {margin-left: 5.3333vw;font-weight: bold;}.message > div:nth-child(2) {display: flex;align-items: center;justify-content: space-between;width: 90%;margin: 0 auto;}.message > div:nth-child(2) div {display: flex;align-items: center;}.message div:nth-child(2) img {width: 13.3333vw;}.message > div:nth-child(3) {width: 90%;margin: 0 auto;}.job {width: 100%;background-color: #fff;overflow: hidden;margin-bottom: 4vw;}.intention {display: flex;justify-content: space-between;align-items: center;width: 90%;margin: 0 auto;padding-top: 2.6667vw;}.intention span {font-weight: bold;}.intention .van-icon {font-size: 5.3333vw;}.functions {display: flex;align-items: center;justify-content: space-between;width: 90%;margin: 0 auto;padding: 4vw 0;border-bottom: 2px solid #e4e4e4;}.left {width: 60%;}.left div {display: flex;justify-content: space-between;margin-bottom: 2.6667vw;}.experience {width: 100%;background-color: #fff;overflow: hidden;margin-bottom: 4vw;}.history {display: flex;justify-content: space-between;align-items: center;width: 90%;margin: 0 auto;padding-top: 2.6667vw;}.history span {font-weight: bold;}.history .van-icon {font-size: 5.3333vw;}.experience .content {width: 90%;margin: 0 auto;display: flex;flex-direction: column;padding-bottom: 4.6667vw;border-bottom: 1px solid #e4e4e4;}.content .firm {display: flex;justify-content: space-between;margin: 2.6667vw 0;}.content span:nth-child(3) {margin: 2.6667vw 0;}.part {background-color: #f2f2f2;color: #999999;}.part p {padding: 2.6667vw 1.6vw;}.educated {width: 100%;background-color: #fff;overflow: hidden;margin-bottom: 4vw;}.qualifications {display: flex;justify-content: space-between;align-items: center;width: 90%;margin: 0 auto;padding-top: 2.6667vw;}.qualifications span {font-weight: bold;}.qualifications .van-icon {font-size: 5.3333vw;}.educated .content {width: 90%;margin: 0 auto;display: flex;flex-direction: column;padding-bottom: 4.6667vw;border-bottom: 1px solid #e4e4e4;}.educated .content .school {display: flex;justify-content: space-between;margin: 2.6667vw 0;}.educated .content .degree {margin-top: 2.6667vw;}.educated .content .degree span:nth-child(1) {margin-right: 5.3333vw;}.certificate {width: 100%;background-color: #fff;overflow: hidden;margin-bottom: 4vw;}.certificate .cert {display: flex;justify-content: space-between;align-items: center;width: 90%;margin: 0 auto;padding-top: 2.6667vw;}.cert span {font-weight: bold;}.cert .van-icon {font-size: 5.3333vw;}.certificate .content {display: flex;width: 100%;flex-wrap: wrap;justify-content: space-around;}.certificate .content .credentials {width: 30%;background-color: #e4e4e4;padding: 1.3333vw 0.5333vw;text-align: center;margin-top: 5.3333vw;}效果图
该页面通过axios.get获取数据再通过v-for进行循环渲染页面
3.2.1求职意向修改页面
代码：
薪资要求-k提交// 导入useRouter方法import { useRouter } from "vue-router";import { ref } from "vue";import { areaList } from "@vant/area-data";import { get, post, put, del, patch } from "~/axios/http";const router = useRouter();// 返回上一页const onClickLeft = () => {router.go(-1);};const result = ref("");const showPicker = ref(false);const columns = [{ text: "会计", value: "Hangzhou" },{ text: "老师", value: "Ningbo" },{ text: "IT", value: "Wenzhou" },{ text: "税务", value: "Shaoxing" },{ text: "管理", value: "Huzhou" },];const onConfirm = ({ selectedOptions }) => {result.value = selectedOptions[0]" /> {showArea.value = false;resultTwo.value = selectedOptions.map((item) => item.text).join("/");};const value = ref("");const valueOne = ref("");async function onSubmit(values) {console.log("submit", values);let id = ref(localStorage.getItem("key"));let arr1 = ref(`${values.money}-${values.moneyOne}k`);let arr = ref({ name: values.picker, money: arr1.value, place: values.area });console.log(arr.value);let res1 = await get(`/api/infomation/${id.value}`);res1.data.num4.push(arr.value);let res2 = await patch(`/api/infomation/${id.value}`, {num4: res1.data.num4,});router.push("/resume");}.money {display: flex;align-items: center;}.a {margin-left: 4vw;margin-top: 8vw;}效果图：
该页面通过vant4组件获取表单值，通过axios.patch修改数据
3.3我的意见反馈模块
代码：
反馈类型：{{ value.type }}{{value.state}}内容：{{ value.content }}添加反馈import { ref } from "vue";import { get, post, put, del, patch } from "~/axios/http";// 导入useRouter方法import { useRouter } from "vue-router";const router = useRouter();// 返回上一页const onClickLeft = () => {router.go(-1);};const runAdd = () => {router.push("/add");};const value = ref("");const arr = ref([]);async function message() {let id = ref(localStorage.getItem("key"));let res1 = await get(`/api/infomation/${id.value}`);console.log(res1.data.num7);arr.value = res1.data.num7;}message();.content {width: 100%;padding: 4vw 0;border: 0.2667vw solid #e6e6e6;}.content div {width: 90%;margin: 0 auto;}.one {display: flex;justify-content: space-between;align-content: center;}.two {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.body {margin-bottom: 5.3333vw;}.bt {width: 14.3333vw !important;padding: 0.2667vw !important;height: 8.6667vw;}效果图：
页面通过axioas.get获取数据
四、总结
这次项目有了招聘app的基础功能，但是还有许多细节需要完善。