计算机科学与技术辅修学士的课程设计
最终决定做微信小程序(比较简单)
刷题小程序方向
题库是软考内容
前端uniapp开发
后端django开发
springboot目前不太会,django上手比较快,后端能用就行()
数据库MySQL
主页
我的
答题卡
题库直接从网上爬取
传送门: 记录一次爬虫题库
这个要写可以写好几页,先带过
参考了软考通
分段器
<view class="practice-title">
<u-subsection :list="list" mode="subsection" :current="model" @change="sectionChange"></u-subsection>
</view>
data
list:['答题模式','背题模式'],
:current绑定了当前选项
通过父子组件通信
PartPage
<PratPage :question="questionList" :swiperIndex="swiperIndex" @dex="indexChange" :logList="logList" @log="logChange" v-model="model"></PratPage>
用v-model模式双向绑定
PartPage.vue中
props:[
"question","swiperIndex","logList","value"
],
v-model默认参数名为value
然后先看题目滑动显示
使用swpier组件遍历questionList即可实现题目显示
<swiper class="swipe-box" @change="dexChange" :current="currentIndex">
<swiper-item skip-hidden-item-layout="true" class="swipe-item" v-for="(item,index) in question" :key="index">
<view class="stem">{
{
item.stem}}</view>
</swiper-item>
</swiper>
参考了这篇文章
父子组件传参
swpier组件传值给父组件
父组件传值给导航栏组件
swiper部分,滑动时会调用dexChange函数传值给父组件
<swiper class="swipe-box" @change="dexChange" :current="currentIndex">
<swiper-item skip-hidden-item-layout="true" class="swipe-item" v-for="(item,index) in question" :key="index">
<view class="stem">{
{
item.stem}}</view>
</swiper-item>
</swiper>
父组件传入swiperIndex
<PratPage :question="questionList" :swiperIndex="swiperIndex" @dex="indexChange" :logList="logList" @log="logChange" v-model="model"></PratPage>
子组件传给父组件
swiper改变变时调用
dexChange(e) {
this.$emit('dex', e.detail.current);
this.currentIndex = e.detail.current;
},
父组件方法
indexChange(current) {
this.currentIndex = current;
},
父组件把每个question传给选项子组件
Option.vue
<template>
<view>
<view v-for="(option,itemindex) in options" class="option">
<view class="option-item" :class="{isright:(isRight(option,itemindex)),iserror:(isError(option,itemindex)),isright:(model&option.rightFlag)}" @click="chooseOption(itemindex)" :key="index">
{
{
option.option}}.{
{
option.content}}
</view>
</view>
<view v-if="show | model" class="analysis">
{
{
item.analysis}}
</view>
</view>
</template>
script
比较复杂,直接贴出
<script>
import http from "@/network/Request.js"
export default {
data() {
return {
options:JSON.parse(this.item.answer),
index:-1,
show:0,
}
},
methods: {
chooseOption(itemindex) {
this.index = itemindex
this.show = 1
this.$emit('answered',this.options[itemindex].rightFlag);
// console.log(itemindex)
// 0 1 2 3 4
},
isRight(option,itemindex) {
// console.log(itemindex)
if(option.rightFlag == 1 && itemindex == (this.index)){
// this.$emit('answered',true);
return true;
}
},
isError(option,itemindex){
if(option.rightFlag == 0 && itemindex == (this.index)){
// this.$emit('answered',false);
return true;
}
}
},
props:[
"item","model"
],
mounted() {
// this.show()
this.index = -1
},
computed: {
listen() {
this.model = this.$props.model
}
}
}
</script>
通过computed监听model的变化
也就是上面那个刷题模式/背题模式的current
错题分析那里实现了刷题模式
通过dynamic class显示,关键在这一句
<view class="option-item" :class="{isright:(isRight(option,itemindex)),iserror:(isError(option,itemindex)),isright:(model&option.rightFlag)}" @click="chooseOption(itemindex)" :key="index">
</view>
methods
methods: {
chooseOption(itemindex) {
this.index = itemindex
this.show = 1
this.$emit('answered',this.options[itemindex].rightFlag);
// console.log(itemindex)
// 0 1 2 3 4
},
isRight(option,itemindex) {
// console.log(itemindex)
if(option.rightFlag == 1 && itemindex == (this.index)){
// this.$emit('answered',true);
return true;
}
},
isError(option,itemindex){
if(option.rightFlag == 0 && itemindex == (this.index)){
// this.$emit('answered',false);
return true;
}
}
},
实现逻辑是初始化了一个index
(由于是嵌入在swiper滑动栏里面的,每次滑动的时候都会调用mouted把index初始化)
判断当前选中的是不是itemindex
itemindex看源码即可知道是option中的索引
然后再判断选中option的rightFlag属性即可实现动态显示效果
效果图
创建BottomBar组件
<template>
<view class="bomBar-box">
<view class="bomBar">
<view class="left">
<slot name="left"></slot>
</view>
<view class="center">
<slot name="center"></slot>
</view>
<view class="right">
<slot name="right"></slot>
</view>
</view>
</view>
</template>
<script>
export default{
name:"BottomBar",
data(){
return{
}
},
}
</script>
<style scoped lang="scss">
.bomBar-box{
display: flex;
justify-content: space-around;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
box-shadow: 0 0 6rpx #9E9E9E;
z-index: 9;
background-color: white;
}
.bomBar{
width: 90vw;
display: flex;
height: 8vh;
// padding-bottom: 20rpx;
font-size: $uni-font-size-sm;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
align-items: center;
box-sizing: border-box;
}
.left,.right{
height: 8vh;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: space-around;
width: 30vw;
}
.center{
height: 8vh;
flex:1;
display: flex;
justify-content:space-around;
align-items: center;
}
.page-dark{
-webkit-filter:brightness(20%);
// color: $uni-dark-font;
}
</style>
主页面调用组件
<BottomBar>
<template v-slot:left>
<view v-if="favCompu" class="bom-left" @click="favClick">
<u-icon name="star" size="40rpx" color="#7f7f7f"></u-icon>
<view>
收藏
</view>
</view>
<view v-else class="bom-left" @click="favClick">
<u-icon name="star-fill" size="40rpx" color="#ffea47"></u-icon>
<view>
已收藏
</view>
</view>
</template>
<template v-slot:center>
<view @click="openCard" class="bom-center">
<u-icon name="list" size="42rpx" color="#7f7f7f"></u-icon>
<view class="">
{
{
currentIndex}}/{
{
questionList.length}}
</view>
</view>
</template>
<template v-slot:right>
<view @click="openSet" class="bom-right">
<u-icon name="setting" size="46rpx" color="#7f7f7f"></u-icon>
</view>
</template>
</BottomBar>
目前的UI
用户在Option.vue组件中触发了chooseOption方法后可以将标志位置1
v-if即可显示解析
<view v-if="show | model" class="analysis">
{
{
item.analysis}}
</view>
show作为标志位,model为前面的刷题模式选择
取或即可实现背题模式显示解析
由于双向绑定的问题
这里采用了监听
computed: {
listen() {
this.model = this.$props.model
}
}
使用 uni-popup 组件
安装过程可见本人另外一文
传送门: uni-ui安装
<uni-popup ref="set">
<view class="set-box">
<view class="set" @longpress="copyID">
长按复制该题ID
</view>
<view class="set">
开启自动切换
<u-switch v-model="isLoop"></u-switch>
</view>
<view class="set">
暗色模式
<u-switch v-model="isDark"></u-switch>
</view>
</view>
</uni-popup>
css
.set-box {
display: flex;
flex-direction: column;
padding-left: 80rpx;
border-radius: 60rpx 60rpx 0 0;
height: 390rpx;
width: 100vw;
background-color: white;
box-sizing: border-box;
padding-top: 40rpx;
}
.set {
display: flex;
align-items: center;
justify-content: space-between;
margin: 20rpx 0;
height: 60rpx;
width: 80vw;
font-size: $uni-font-size-sm;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10% 10% 0 0;
width: 100%;
background-color: white;
z-index: 10;
height: 800rpx;
}
wrapper是蒙板
效果图
采用了一个logList来实现该功能
[{
'questionId': '20201103145848-d02188e6-7ff1-45b2-9175-b7072bebd7af', 'index': 1, 'isChoose': False, 'isRight': False, 'collect': True}
{
'questionId': '20201103145848-9cf85337-259b-4c87-9e67-2cfc57fff22c', 'index': 2, 'isChoose': True, 'isRight': 0, 'collect': False}
{
'questionId': '20201103145848-228114f8-2ada-48df-9f2f-d3091ec2629a', 'index': 3, 'isChoose': True, 'isRight': 0, 'collect': True}
{
'questionId': '20201103145848-0a107f96-fbea-4da0-b035-a9751838e21a', 'index': 4, 'isChoose': True, 'isRight': 0, 'collect': False}
{
'questionId': '20201103145848-c854e3ac-ffcc-4596-a313-a4d52c78aacc', 'index': 5, 'isChoose': True, 'isRight': 1, 'collect': False}
{
'questionId': '20201103145848-38fa3bcd-bd15-40e8-ad8c-76d6667a6c5f', 'index': 6, 'isChoose': False, 'isRight': False, 'collect': False}
{
'questionId': '20201103145848-8cdccb64-45f6-4e64-ac16-5b0ed8523879', 'index': 7, 'isChoose': False, 'isRight': False, 'collect': False}
{
'questionId': '20201103145848-972f9d13-621c-422b-9780-ac7240cd1727', 'index': 8, 'isChoose': False, 'isRight': False, 'collect': False}
{
'questionId': '20201103145848-0a1243df-896c-485d-80c0-0bfc71574f46', 'index': 9, 'isChoose': False, 'isRight': False, 'collect': False}
{
'questionId': '20201103145848-358d4afe-9d1c-4ca3-a2c3-2b6eb36429f8', 'index': 10, 'isChoose': True, 'isRight': 0, 'collect': False}
{
'questionId': '20201103145848-ddb973b1-ea24-4d41-bc99-c4b04e5c39cc', 'index': 11, 'isChoose': True, 'isRight': 0, 'collect': False}
{
'questionId': '20201103145848-1cacf73f-c65c-45c6-9d88-d87e63a25fcf', 'index': 12, 'isChoose': True, 'isRight': 0, 'collect': False}]
结构如图
0,1和布尔值用的有点不规范但是不影响使用
父组件通过网络请求/自己初始化一个logList然后传给子组件
logList获取/初始化方法
http.post('/api/get_log',{
chapterId:this.chapterId,
productId:this.productId,
}).then(res => {
// console.log(JSON.stringify(res.data.data))
if(res.data.code == 200)
{
this.logList =JSON.parse(JSON.parse(res.data.data.logList))
store.state.logList = this.logList
}
if(res.data.code == 201)
{
for(var i=0;i<this.questionList.length;i++)
{
this.logList.push({
questionId:this.questionList[i].id,
index:i+1,
isChoose:false,
isRight:false,
collect:false,
})
}
store.state.logList = this.logList
}
})
http为封装好的axios组件
store是暂存组件
长期缓存需要使用setStorge方法
传给子组件PratPage.vue
<PratPage :question="questionList" :swiperIndex="swiperIndex" @dex="indexChange" :logList="logList" @log="logChange" v-model="model"></PratPage>
二级子组件Option.vue
<Option @answered="answered" :item="item" :model="value"></Option>
用户点击option后调用
answered(isRight) {
// console.log(this.currentIndex,isRight)
this.logList[this.currentIndex].isChoose = true
// this.logList[index]['isChoose'] = true,
this.logList[this.currentIndex].isRight = Number(isRight)
this.$emit('log',this.logList)
},
修改logList的值并传给父组件
父组件接到传值后调用api缓存到数据库
logChange(logList) {
// 会调用
this.logList = logList
http.post('/api/log',{
logList:JSON.stringify(logList),
chapterId:this.chapterId,
productId:this.productId
})
},
这里实现了题目对错的记录
Pagnation.vue
<template>
<view>
<view class="title">
答题卡
</view>
<scroll-view class="scroll-y" scroll-y="true">
<view class="title-box">
<view v-for="(item,itemindex) in statusList"
:class="{isright:(item.isChoose & item.isRight==1),iserror:(item.isChoose & item.isRight==0),selected:(itemindex == (choose))}"
@click="tp(item.index)" class="ball" >
{
{
item.index}}
</view>
</view>
</scroll-view>
</view>
</template>
用一个下拉区域实现会更优雅
用户点击后把点击的index传到主组件中
直接修改swiper的current值即可实现跳转
如果下拉区域无法显示尝试给它加个高度
.scroll-y {
height: 50vh;
}
收藏功能同理,修改logList里面的collect属性
Practice.vue通过index定位监听collect属性
computed: {
favCompu() {
if(this.logList[this.currentIndex]){
if(this.logList[this.currentIndex].collect){
return true
}
else{
return false
}
}
}
},
收藏显示跟随功能到此已实现
经典jwt
django目录
/api/views.py
部分code
import pymysql
from authlib.jose import jwt
def login(request):
nickname = request.POST.get('nickname')
avatar_url = request.POST.get('avatar_url')
code = request.POST.get('code')
url = 'https://api.weixin.qq.com/sns/jscode2session'
data = {
'js_code':code,
'appid':'手动打码',
'密钥':'手动打码',
'grant_type':'authorization_code',
}
r = requests.post(url,data = data)
openid = json.loads(r.text)['openid']
cursor = connection.cursor()
cursor.execute('SELECT * FROM user_map WHERE openid = %s',[openid])
if cursor.fetchone():
pass
else:
cursor.execute("INSERT INTO user_map(openid,nickname,avatar_url) VALUES (%s,%s,%s)",[openid,nickname,avatar_url])
token = jwt.encode( {
'alg': 'HS256'}, {
'iss': '',
'exp': int(time.time()) + 7200 ,
'openid':openid
}
,settings.SECRET_KEY).decode('UTF-8')
return packApiData(200,'ok','登录成功',{
'token':token,'openid':openid})
def packApiData(code=0, message="Lack Parameter", tips="参数缺失", data={
}):
# packApiData 规范化组装接口回调数据
return HttpResponse(json.dumps(
{
'code': code,
'message': message,
'tips': tips,
'requestTime': int(time.time()),
'data': data
},
cls=CJsonEncoder),content_type="application/json")
这里直接使用了openid作为用户唯一标识
openid的获取参考微信官方文档
获取openid
鉴权
try:
claim = jwt.decode(request.headers['Authorization'], settings.SECRET_KEY)
openid = claim.get('openid')
except:
return packApiData(401, 'please login', '请先登录')
没有jwt的返回登录
后端返回jwt后储存在本地
login() {
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey
if(res.code){
http.post('/api/login',{
code:res.code,
nickname:this.nickName,
avatar_url:this.avatarUrl,
}).then(res => {
// store.state.user.token = res.data.data.token
wx.setStorageSync('token',res.data.data.token)
wx.setStorageSync('openid',res.data.data.openid)
// store.state.user.openid = res.data.data.openid
// console.log(res.data.data.token)
})
}
}
})
},
store在每次进入小程序时会重置,长期存储需要使用wx.setStorageSync()
ps:
wx.setStorage()存储结构有一点区别
请求拦截器
import Luch from 'luch-request'
const http = new Luch({
baseURL:"http://127.0.0.1:8000",
// 自己的ip:host,微信小程序的后端需要使用域名
withCredentials: false,
timeout: 300000, //超时时长5分钟,
header: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
http.interceptors.request.use((config)=>{
config.header.Authorization = wx.getStorageSync('token')
return config
})
短期缓存可以使用Store组件
/store/index.js
//引用Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//实例store对象
const store = new Vuex.Store({
state: {
user:{
token:''
},
chapterList:[],
},
mutations: {
/*......*/
}
})
//导出store对象
export default store
//export default const store或者export const store会报错
缓存题目,logList等短期内不刷新的参数
长时间缓存如token 昵称 头像等需要使用wx.setStorage()
昵称,头像也可以通过网络请求获得
数据库采用MySQL
连接使用pymysql
django原生的语句我个人不太喜欢
后端采用nginx+uwsgi+django的模式
nginx转发请求到uwsgi
wusgi安装可以参照我的这篇文章
ubuntu安装uwsgi
nginx的部分配置文件
server {
listen 443;
server_name 域名/ip地址;
charset utf-8;
client_max_body_size 75M;
location / {
uwsgi_pass 127.0.0.1:8001;
# 这里转发到uwsgi中设置的
include /etc/nginx/uwsgi_params;
uwsgi_read_timeout 15;
}
}
}
uwsgi.ini
[uwsgi]
socket = 127.0.0.1:8001
# 与nginx保持一致
chdir=django项目路径
module=项目名称.wsgi
py-autoreload = 1
#自动重载建议开
https配置参考腾讯云文档
Nginx 服务器 SSL 证书安装部署
告一段落了,结课还有一段时间,慢慢打磨
2022-07-25 希望早日润
未完待续
文章浏览阅读565次。本文主要介绍如何使用C#通过OPC方式连接PLC,并提供了相应的程序和学习资料,以便读者学习和使用。OPC服务器是一种软件,可以将PLC的数据转换为标准的OPC格式,允许其他软件通过标准接口读取或控制PLC的数据。此外,本文还提供了一些学习资料,包括OPC和PLC的基础知识,C#编程语言的教程和实例代码。这些资料可以帮助读者更好地理解和应用本文介绍的程序。1.该程序是通讯方式是CSharp通过OPC方式连接PLC,用这种方式连PLC不用考虑什么种类PLC,只要OPC服务器里有的PLC都可以连。_c#opc通信
文章浏览阅读1.6w次,点赞3次,收藏10次。实践环境物理机:Windows10教育版,操作系统版本 17763.914虚拟机:Ubuntu18.04.3桌面版在Hyper-V中的刚安装好Ubuntu虚拟机之后,会发现鼠标滑动很不顺畅,也不能向虚拟机中拖拽文件或者复制内容。在VMware中,可以通过安装VMware tools来使物理机和虚拟机之间达到更好的交互。在Hyper-V中,也有这样的工具。这款工具可以完成更好的鼠标交互,我的..._win10 hyper-v ubuntu18.04 文件拷贝
文章浏览阅读156次。前言互联网时代,瞬息万变。一个小小的走错,就有可能落后于别人。我们没办法去预测任何行业、任何职业未来十年会怎么样,因为未来谁都不能确定。只能说只要有互联网存在,程序员依然是个高薪热门行业。只要跟随着时代的脚步,学习新的知识。程序员是不可能会消失的,或者说不可能会没钱赚的。我们经常可以听到很多人说,程序员是一个吃青春饭的行当。因为大多数人认为这是一个需要高强度脑力劳动的工种,而30岁、40岁,甚至50岁的程序员身体机能逐渐弱化,家庭琐事缠身,已经不能再进行这样高强度的工作了。那么,这样的说法是对的么?_类初始化一个静态属性 为线程池
文章浏览阅读1w次,点赞13次,收藏43次。说来也是惭愧,一直以来,在装环境的时候都会从官网下载Maven。然后再在idea里配置Maven。以为从官网下载的Maven是必须的步骤,直到今天才得知,idea有捆绑的 Maven 我们只需要搞一个配置文件就行了无需再官网下载Maven包以后再在新电脑装环境的时候,只需要下载idea ,网上找一个Maven的配置文件 放到 默认的 包下面就可以了!也省得每次创建项目都要重新配一次Maven了。如果不想每次新建项目都要重新配置Maven,一种方法就是使用默认的配置,另一种方法就是配置 .._安装idea后是不是不需要安装maven了?
文章浏览阅读45次。家是我们一生中最重要的地方,小时候,我们在这里哭、在这里笑、在这里学习走路,在这里有我们最真实的时光,用相机把它记下吧。 很多家庭在拍摄孩子时有一个看法,认为儿童摄影团购必须是在风景秀丽的户外,即便是室内那也是像大酒店一样...
文章浏览阅读429次。Dockerfile介绍Dockerfile是构建镜像的指令文件,由一组指令组成,文件中每条指令对应linux中一条命令,在执行构建Docker镜像时,将读取Dockerfile中的指令,根据指令来操作生成指定Docker镜像。Dockerfile结构:主要由基础镜像信息、维护者信息、镜像操作指令、容器启动时执行指令。每行支持一条指令,每条指令可以携带多个参数。注释可以使用#开头。指令说明FROM 镜像 : 指定新的镜像所基于的镜像MAINTAINER 名字 : 说明新镜像的维护(制作)人,留下_rocker/r-base镜像
文章浏览阅读223次。该系统将提供便捷的信息发布、物业报修、社区互动等功能,为小区居民提供更加便利、高效的服务。引言: 随着城市化进程的加速,小区管理成为一个日益重要的任务。因此,设计一个基于微信小程序的小区管理系统成为了一项具有挑战性和重要性的毕设课题。本文将介绍该小区管理系统的设计思路和功能,以期为小区提供更便捷、高效的管理手段。四、总结与展望: 通过本次毕设项目,我们实现了一个基于微信小程序的小区管理系统,为小区居民提供了更加便捷、高效的服务。通过该系统的设计与实现,能够提高小区管理水平,提供更好的居住环境和服务。_ssm基于微信小程序的公寓生活管理系统
文章浏览阅读635次。文章来源i春秋入坑Ubuntu半年多了记得一开始学的时候基本一星期重装三四次=-= 尴尬了 觉得自己差不多可以的时候 就吧Windows10干掉了 c盘装Ubuntu 专心学习. 这里主要来说一下使用Ubuntu的正确姿势Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的开源GNU/Linux操作系统,Ubuntu 是基于DebianGNU/Linux,支..._ubuntu安装攻击工具包
文章浏览阅读335次。需求:C++中将BYTE型数组传递给Java中,考虑到内存释放问题,未采用通过返回值进行数据传递。public class demoClass{public native boolean getData(byte[] tempData);}JNIEXPORT jboolean JNICALL Java_com_core_getData(JNIEnv *env, jobject thisObj, jbyteArray tempData){ //resultsize为s..._jni引用byte[]
文章浏览阅读2.1k次,点赞5次,收藏30次。本教程代码开源:GitHub 欢迎star文章目录一、平面模型分割1. 代码2. 说明3. 运行二、圆柱模型分割1. 代码2. 说明3. 运行三、欧几里得聚类提取1. 代码2. 说明3. 运行四、区域生长分割1. 代码2. 说明3. 运行五、基于最小切割的分割1. 代码2. 说明3. 运行六、使用 ProgressiveMorphologicalFilter 分割地面1. 代码2. 说明3. 运行一、平面模型分割在本教程中,我们将学习如何对一组点进行简单的平面分割,即找到支持平面模型的点云中的所有._pclpy.pcl.pointcloud.pointxyzi转为numpy
文章浏览阅读141次。一 其实在 skyeye 上移植 arm-linux 并非难事,网上也有不少资料, 只是大都遗漏细节, 以致细微之处卡壳,所以本文力求详实清析, 希望能对大家有点用处。本文旨在将 arm-linux 在 skyeye 上搭建起来,并在 arm-linux 上能成功 mount NFS 为目标, 最终我们能在 arm-linux 里运行我们自己的应用程序. 二 安装 Sky..._nfs启动 arm
文章浏览阅读598次,点赞2次,收藏5次。00为了形成一个体系,想将前面学过的一些东西都拉来放在一起总结总结,方便学习,方便记忆。攻防世界 Pwn 新手攻防世界 Pwn 进阶 第一页01 4-ReeHY-main-100超详细的wp1超详细的wp203 format2栈迁移的两种作用之一:栈溢出太小,进行栈迁移从而能够写入更多shellcode,进行更多操作。栈迁移一篇搞定有个陌生的函数。C 库函数 void *memcpy(void *str1, const void *str2, size_t n) 从存储区 str2 _pwn snprintf