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

# 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'
// 导入vuex
import 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 router

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')

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

代码：

效果图：

登录模块静态页面主要使用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的基础功能，但是还有许多细节需要完善。