vue3+vite+vant4手机端项目实录

目录

一、项目介绍

二、项目的搭建

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的安装

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'
// 导入vuex
import store from './store'
createApp(App).use(router).use(vant).use(Icon).use(store).mount('#app')

4.路由router的引入

4.1安装指令

4.2路由配置

//1. 导入vue-router相关函数
import { createRouter, createWebHashHistory } from "vue-router"
// 2.路由规则
const routes = [{path:"路由地址",name:"路由名称",component:组件名称}
]
// 3.路由对象实例化
const router = createRouter({history: createWebHashHistory(),routes
})
// 暴露导出
export default router

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'
// 导入vuex
import store from './store'
createApp(App).use(router).use(vant).use(Icon).use(store).mount('#app')

5.路径别名设置

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.登录页面

代码：

效果图：

登录模块静态页面主要使用vant4组件库中的组件，主要实现了通过vant表单的数据提交和axios方法获取本地数据来判断手机号与密码是否正确。同时成功就通过路由跳转

2.注册页面

代码：

效果图：

注册模块静态页面主要使用vant4组件库中的组件，主要实现了通过vant表单的数据提交和axios方法获取本地数据来判断两次密码是否一致，一致就通过axios增加本地数据。验证码功能未实现

3.修改密码

代码：

效果图：

修改密码由两个页面组成，通过输入手机号用axios得到本地数据才能进入修改密码页面，同时通过router方法传进一个id值同时用route方法接受id值，修改指定账号的密码

4.开始页面

代码：

效果图：

该页面主要进行三个端口的跳转，通过router路由的push方法进行路由跳转

四、用户端模块

分为职位、求职申请、我的三个主页面

1.职位模块

代码：

效果图：

该页面主要通过v-for进行数据遍历，axios.get方法进行数据引用、搜索栏静态效果主要用vant4组件，模糊搜索用了await get(`/api/infomation2?name_like=${val}`)的方法。

 1.1职位详情页面

代码：

效果图：

 该页面通过职位页面router路由query传值方法接收不同id值，再通过axios方法获取json-server不同id值的数据从而实现数据动态交互。同时页面数据同样通过axios.get方式获取数据渲染页面。按钮感兴趣与投递简历都能实现数据的传递

2.求职申请页面

代码：

效果图

 该页面通过json-server数据对岗位状态进行分别展示，通过v-show进行不同状态的不同岗位展示

同时不同用户显示自己的参与的岗位状态实现数据的动态显示。

2.1求职申请详情页

效果图：

 该页面通过职位页面router路由query传值方法接收不同id值，再通过axios方法获取json-server不同id值的数据从而实现数据动态交互。同时页面数据同样通过axios.get方式获取数据渲染页面。

3.我的页面

代码：

效果图：

 该页面名字头像实现动态改变同时已投递、已面试、感兴趣都能通过职位的状态改变发生改变，功能模块通过router.push跳转。

3.1我的页面信息修改

代码：

效果图：

该页面通过vant4组件获取表单值，通过axios.patch修改数据

3.2我的在线简历页面

代码：

 效果图

 该页面通过axios.get获取数据再通过v-for进行循环渲染页面

3.2.1求职意向修改页面

代码：

效果图：

该页面通过vant4组件获取表单值，通过axios.patch修改数据

3.3我的意见反馈模块

代码：

效果图：

页面通过axioas.get获取数据

 四、总结

这次项目有了招聘app的基础功能，但是还有许多细节需要完善。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！