mpvue+vant+flyio+django搭微信小程序（项目）

一、更改vant的样式

<style>
  .login-btn {
    background-color: #ee3f4d!important;
    border: 1PX solid #ee3f4d!important;
  }
</style>
<style scoped>  《====注意scoped
</style>

重点就是组件上的属性 custom-class（根节点样式类）和 !important（优先级，因为根节点样式类是加在 class 开头的），还有就是不要放在 <style scoped> 下，不然会无法修改。

scoped：在vue组件中，在style标签上添加scoped属性，表示样式作用于当下的模块，实现了样式私有化。scoped设计的初衷就是让样式变得不可修改

二、提交表单

问题：1.form 如何绑定     2.button 如何提交     3.input 如何标记

1.原生

<form bindsubmit="formSubmit">
      <button form-type="submit">haha</button>

2.mpvue 

<form @submit="formSubmit">
      <button form-type="submit">haha</button>

3、mpvue+vant

放弃vant的button了，根本不能和form表单组合

以下是表单提交内容，从回调事件读出

用户信息获取到了，下一步是传给服务器验证

三、使用flyio

 

post的两种方式

this.$fly.request({
  method: 'post', // post/get 请求方式
  url: 'http://127.0.0.1:8000/login/',
  body: {a: "1"}
}).then(res => {
  console.log(res)
})

this.$fly.request("http://127.0.0.1:8000/login/",{name: "haha"},{
  method:"post",
}).then(res => {
  console.log(res)
})

 

官方文档：https://wendux.github.io/dist/#/doc/flyio/readme

问题：传不过去 

 解决：

注释掉47行 

问题：request.POST为{ }空 

在服务器端我用request.POST期望能获取到<QueryDict: {u'key2': [u'value2'], u'key1': [u'value1']}>，但是我发现获取到的是一个空的<QueryDict: {}>，用reqyest.body是能获取到原始的请求内容key2=value2&key1=value1的。 
这个时候只能去文档中找答案了，但是貌似Django中的文档也没给出我答案，这时候我就只能通过源码来找答案了，下面是class HttpRequest(object)中获取POST QueryDict的函数部分：

函数看起来有点长，但是我们只要关注后面的if elif else这三个分支即可，从elif self.content_type == 'application/x-www-form-urlencoded':这个分支能看到只有请求header中的'Content-Type'：'application/x-www-form-urlencoded'才会填充request.POST，其它情况下只有一个空的<QueryDict: {}>。 
从这个问题也看到了Django对'Content-Type':'application/json'没有做任何处理，跟我预想的有一点不一样。
--------------------- 
作者：NoneSec 
来源：CSDN 
原文：https://blog.csdn.net/liuxingen/article/details/54176205 
版权声明：本文为博主原创文章，转载请附上博文链接！

（又发现一个相关的东西）

 

四、用户登录 

用get方法查询的时候，查询不到内容的时候会抛出异常，同样查询结果多余1条的时候也会抛出异常

filer若是查询不到数据，会返回一个空的查询集，查询到多余一条的时候会返回一个包含多个对象的查询集。

user_obj = models.UserInfo.objects.get(user_name=user_name)  不行

user_obj = models.UserInfo.objects.filter(user_name=user_name)  可以

 

五、在服务器上搭环境

1.安装依赖   安装python3  软连接（见https://blog.csdn.net/six66hao/article/details/80985641

2.安装virtualenv

插曲：使用yum --enablerepo=epel -y install python-virtualenv安装的不太行，卸载：yum erase python-virtualenv

见https://blog.csdn.net/u012516524/article/details/82154053

3.删除软件

可能会用到 

 现在采用一键部署的方案

git pull 时每次都要输入用户名和密码的解决办法

git config --global credential.helper store

再操作一次git pull，然后它会提示你输入账号密码，这一次之后就不需要再次输入密码了。

六、页面样式设计

1、帅气的多个子元素居中 

2、控制div的显示与否，以及是否占据空间

隐藏控件的方法有两种，设置控件的style的“display”和“visibility”属性。
style.display="block"        style.display="none"           显示/隐藏      隐藏时不占空间
style.visibility="visible"     style.visibility="hidden"       显示/隐藏      隐藏时占据空间

然而以上的东西并没在mpvue中使用成功，

<userCardTmp v-if="scanUserObj.show" :item="scanUserObj" />

最后使用的mpvue中的v-if，还挺好用，隐藏时不占空间

七、数据交互（django的return，与flyio）

 

一、前端部分

 

二、后台部分

1、django url正则匹配问题

前端的请求 

this.$fly.request("http://192.168.137.1:8000/check", {id: res1.result}, {

后端的匹配 

    url(r'^chec', views.goodsEntry),
    url(r'^check', views.check)

结果是，进入了chec的程序，这个问题需要去研究一下。近阶段就不要让他们的前缀相同了

2、ORM的filter id问题

django代码 

print('扫描的物品的ID')
print(request.GET)
id = request.GET.get('id', None)
print('id', id, type(id))

打印结果 

扫描的物品的ID
<QueryDict: {'id': ['1']}>
id 1 <class 'str'>

注意：id的值是看上去是1，其实是字符串‘1’

id = models.AutoField(primary_key=True)

goodsObj = models.GoodsDetail.objects.filter(id=id)

数据表的主键是字符串的形式吗？？？？

三、数据库部分

 

四、服务器部署部分