目录
1、技术介绍
1、管理员后台技术:
Web前端使用vue框架进行开发
后端使用php laravel框架进行开发
数据库使用的是myql
2、小程序用户端的技术:
微信开发者语言:js+json+wxss+wxml
3、项目整体采用的是mvc的思想模式进行开发。代码可读性高,便于理解。
2、需求架构图分析
公需小程序系统分为两个角色:小程序用户、管理员,系统的总体功能架构图如下所示:
3、数据库表设计
用户提问表设计如下:
城市表设计如下:
用户投递岗位信息:
用户表设计如下:
资讯表设计如下:
用户现就业状态表设计如下:
岗位表设计如下:
4、前后端数据通讯方式介绍
小程序端和请求后端接口的方式介绍:
小程序HTTP 请求:小程序可以通过 HTTP 请求向后端服务器发送请求,请求数据或者请求更新界面。后端服务器可以通过响应来回复小程序的请求,从而让小程序更新界面,
代码实例如下:
wx.request({ //微信小程序发送请求的函数
url: url, //请求的后端api地址
method:"post", //请求方式
data:{ //西安后端接口传递的数据
},
dataType:"json", //数据传输的格式
success:(response) =>{ //请求成功的回调函数
console.log(response); //response 为请求返回的数据情况
}
})
后端接口RESTful API:REST(Representational State Transfer) 是一种基于 HTTP 协议的 Web API 设计原则,它允许客户端通过 HTTP 请求来获取、更新和删除数据。小程序可以使用 RESTful API 向后端服务器发送请求,从而获取、更新和删除数据,代码示例如下:
Route::post('/login', 'Api\MembersController@login'); //http路由规则定义
public function login(Request $request){ //控制器中的方法体
}
5、小程序用户功能介绍
5.1、小程序导航页面展示(用户角色)
首页:根据城市分类进行工作岗位的切换,根据关键字进行岗位搜索。
岗位推荐:给用户展示了用户流量最高的热门工作和用户分享量最高的热门分享工作,还有根据用户填写的期望岗位推荐的猜你喜欢工作推荐。
资讯:展示相关的新闻热点资讯。
岗位详细介绍界面中,用户可以向好友分享当前岗位页面,联系企业,投递简历,效果展示如下:
岗位投递小程序端wxml代码如下:
<!--pages/detail/index.wxml-->
<view class="container">
<view class="container-body space-content">
<view class="space-top">
<view class="space-banner" bindtap="imgPreview">
<swiper
autoplay="{{true}}" interval="{{4000}}" duration="{{1000}}" >
<block >
<swiper-item>
<image src="{{host}}{{url}}" mode="aspectFill" class="slide-image"/>
</swiper-item>
</block>
</swiper>
</view>
<view class="space-info">
<view class="space-title">{{spacedata.ParkName}}</view>
<view class="space-tags">
<text wx:for="{{spacedata.TagIDs}}" wx:key="*this">{{item}}</text>
</view>
<view class="space-list">
<view class="space-item">
<text class="text-left">薪资待遇: </text>
<text class="text-right">
<text class="text-orange">¥{{price}}</text>
</text>
</view>
<view class="space-item">
<text class="text-left">工作名字: </text>
<text class="text-right">{{name}}</text>
</view>
<view class="space-item">
<text class="text-left">详细地址:</text>
<text class="text-right" >{{address}}</text>
</view>
<view class="space-item">
<text class="text-left">访问人数:</text>
<text class="text-right" >{{num}}</text>
</view>
</view>
</view>
</view>
<view class="space-block">
<view class="space-block-title">岗位介绍</view>
<view class="space-block-content">
<view class="space-passage"><rich-text nodes="{{content}}"></rich-text></view>
</view>
</view>
</view>
<view class="container-footer">
<button open-type="share">分享</button>
<text bindtap="call">拨打电话</text>
<text class="apply-btn" bindtap="addCollection">投递简历</text>
</view>
</view>
Js代码如下:
//投递岗位
addCollection:function(e){
var userInfo = wx.getStorageSync('userInfo');
if(!userInfo.id){
wx.showToast({
title: '请先登录',
})
return ;
}
wx.request({
url: api.post_collections + '/' + userInfo.id,
method: 'post',
data: {members_id: userInfo.id, products_id: this.data.id},
success: function(response){
if(response.statusCode == 200){
wx.showToast({
title: response.data.message,
icon: 'none'
})
}
}
})
},
后台控制器接口代码如下:
public function postCollections($id, Request $request)
{
//判断用户是否投递
$members_id = $id;
$products_id = $request->input('products_id');
$data = Collections::query()->where(['members_id' => $members_id, 'products_id' => $products_id])->get()->toArray();
if (!empty($data)){
return $this->fail(201,'你已经投递了');
}
Collections::query()->create([
'members_id' => $members_id,
'products_id' => $products_id
]);
return $this->ok([], '投递成功');
}
5.2、个人中心页面展示
功能描述:个人中心用户使用微信授权登录,更新当前的工作状态,查看投递的岗位记录,完善个人简历信息,在线进行提问,查看平台的回复。
6、管理员端功能介绍
管理员登陆后台后可修改个人信息或对用户、岗位、简历等信息进行管理。可通过上方搜索框输入用户昵称进行精确查找。在用户管理栏可查看、添加、修改、删除用户信息,也可修改用户的身份,用户身份分为企业用户和学生用户两类
6.1、登录界面
6.2、主界面
7、项目的完整功能操作录屏
以上是对项目的简单的功能介绍,感兴趣的童鞋可以看以下详细的功能演示地址:
项目功能详细演示地址https://www.bilibili.com/video/BV1FP411B7cN/?vd_source=1b00b299dfb4cd201f2c5966bf0978ac
以上就是对项目的整体介绍。