vue学习笔记

Vue移动端项目-信息管理系统

2019-11-11  本文已影响0人  果木山

移动端项目-信息管理系统

项目依赖

项目结构

上传本地文件的两种方式

 <template>
     <div>
         <!--form表单提交文件-->
         <form action="http://localhost:5055/filewen" method="post" enctype="multipart/form-data">
             <input type="file" name="fromwen" id="filesr"/>
             <input type="submit" value="提交" name="btn"/>
         </form>
         <!--jquery中ajax提交文件-->
         <form>
             <input type="file" name="wenjian" id="files"/>
             <button @click.stop.prevent="toPush">提交数据</button>
         </form>
     </div>
 </template>
 <script>
     export default {
         data(){
             return {
 
             }
         },
         methods: {
             toPush(){
                 var formData=new FormData();
                 formData.append('myFile',$('#files')[0].files[0]);
                 //jquery发送ajax请求，获取数据
                 $.ajax({
                     type: 'POST',
                     url: 'http://localhost:5055/filewen',
                     data:formData,
                     dataType: 'json',
                     contentType: false,//不需要头；
                     processData: false,//不转换数据；
                     success: (res) => {
                         console.log(res);
                     },
                     error: (err)=>{
                         console.log(err);
                     }
                 })
             }
         }
     }
 </script>
 <style scoped>
 
 </style>

webpack打包的知识点

移动端项目-信息管理系统

移动端项目：信息管理系统
1.涉及到的技术栈：
1）vue vue-router构建基本构架
2）webpack压缩打包 webpack-dev-server开发环境测试
3）axios 前端与后台间的数据交互
4）mui mint-ui移动端页面构建 其中mui引入的静态资源 mint-ui下载插件引入
5）其他插件知识：moment转化日期 vue-preview图片预览功能
6）设置后台服务器的插件：
express：构建基本服务器框架
cors：跨域请求设置插件；
formidable：post请求获取数据 图片上传功能；
mongodb：本地数据库存储；
2.项目思路总结
1）顶部通栏 mint-ui
九宫格 mui
底部选项卡 mui =>引入自定义图标iconfont 阿里巴巴矢量图标库
轮播图：mint-ui
2）路由知识：
重定向redirect
路由跳转
params设置
路由嵌套
多视图
3.项目中的知识点
1）底部选项卡点亮效果：设置router-link中的默认点亮类名，配合mui-active使用，完成效果；
2）拦截器interceptor，Axios设置，拦截请求和响应时，设置页面加载效果；
3）过滤器filter，Vue类设置，过滤获取的时间数据，通过moment转化为指定格式的时间；也可以使用silly-datetime
4）mint-ui中的lazy load，图片懒加载设置；只需设置v-lazy绑定变量图片地址；
5）vue-preview移动端图片预览插件的使用；
6）封装两个js文件，一个为子组件传递父组件参数的vue实例，一个为封装的localStorage的操作对象；
7）localStorage本地存储的知识；
8）路由跳转中的钩子函数beforeRouteEnter，在路由跳转前后，进行操作，通过在next()中操作实例
9）给router-view添加过渡动画效果，通过transition包裹，设置样式，但需设置mode参数，规定两个过渡效果发生的先后顺序；
10）购物车总计部分的制作：使用计算属性，遍历整个数据，判断isPicked的布尔值，进行累加，实时更新；
11）图片懒加载功能实现；mui中是在图文列表时，进行的图片懒加载； mint-ui中是在大的图片时使用；

上一篇 下一篇

猜你喜欢

热点阅读