原来也没有那么难!Vue商城开发 | 技术点评

Github来源:力扣 (LeetCode)|刷题打卡 | 求星星 ✨ | 给个❤️关注,❤️点赞,❤️鼓励一下作者

[已开启]任务一:刷题打卡 * 10 篇

大家好,我是魔王哪吒,很高兴认识你~~

哪吒人生信条:如果你所学的东西 处于喜欢 才会有强大的动力支撑

每天学习编程,让你离梦想更新一步,感谢不负每一份热爱编程的程序员,不论知识点多么奇葩,和我一起,让那一颗四处流荡的心定下来,一直走下去,加油,2021加油!欢迎关注加我vx:xiaoda0423,欢迎点赞、收藏和评论

时间:3 月 1 日 ~ 3 月 13 日

  • 力扣 (LeetCode)-两数之和,有效的括号,两数相加|刷题打卡-3月1日

  • 力扣 (LeetCode)-合并两个有序链表,删除排序数组中的重复项,JavaScript笔记|刷题打卡-3月2日

  • 力扣 (LeetCode)-最大子序和,JavaScript数据结构与算法(数组)|刷题打卡-3月3日

  • 针对CSS说一说|技术点评-3月4日

  • 力扣 (LeetCode)-栈,括号生成 |刷题打卡-3月5日

前言

如果这篇文章有帮助到你,给个❤️关注,❤️点赞,❤️鼓励一下作者,接收好挑战了吗?文章公众号首发,关注 程序员哆啦A梦 第一时间获取最新的文章

❤️笔芯❤️~

Vue跨平台开发

使用Vue开发商城全流程的界面设计,如首页,产品展示,购物车,下单,会员界面等。(首页开发,用户管理,实现产品,新闻页面,购物,和订单处理)

  1. Vue.js入门,数据绑定,表单和双向数据绑定,条件和循环指令,样式绑定,事件处理器,监听,和计算属性。

  2. Vue.js组件,自定义指令和响应接口,路由,动画和过渡,Vue.js中的插件Axios。

Vue.js基础语法,数据绑定,表单使用,条件和循环指令,样式绑定,事件处理,监听和计算属性等。

  1. Vue.js是一套构建用户界面的渐进式框架。

  2. Vue只关注视图层,采用的是 自底向上 的 增量式开发设计。

// 引用Vue.js代码


// 示例

 // 显示代码
 
  

{{message}}

 
 // 脚本代码  

不知道大家电脑上有没有,这些在我的电脑上是有的:WebStorm, Eclipse, PhpStorm, Vscode, HBuider等。

Vue.js安装有三种方法:

  • 使用CDN方法

  • 下载官方Vue.js框架

  • NPM方法

基于2.x版本Vue:

// 全局安装
cnpm install --global vue-cli
// 创建一个基于 webpack 模板的新项目
vue init webpack my-project
// 项目名 my-project
// 项目描述 A Vue.js project
// Use ESLine - yes
// Yes 。。。

// 进入项目
cd my-project
cnpm install
cnpm run dev

Vue.js开始

每个Vue应用都需要通过实例化Vue来实现。

示例:

var vm = new Vue({
 // 选项
})

{{dada}}

 // data: { dada: 'jeskson' }

{{use()}}

  methods: {  use() {   return this.dada  } }
  • data用于定义属性

  • methods用于定义函数

  • {{}}用于输出对象属性和函数返回值

1.v-text输出纯文本 2.v-html输出解析后的文本

v-once指令,表示元素和组件只渲染一次,不会随着数据的改变而改变

v-cloak指令

v-cloak不需要表达式,它会在Vue实例结束编译时从绑定的html元素上移除。v-cloak指令经常和display:none配合使用。

示例:


 文本
 {{message}}
new Vue({  el: '#app',  data: {   color: 'red',   fontSize: '12',   message: '魔王哪吒'  }, })

这样当网速慢时,Vue.js文件还没有加载完时,页面上会显示{{message}}的字样,直到Vue创建实例,编译模板时,DOM才会被替换,这个过程中屏幕是有闪动的。

使用CSS:


 [v-cloak] {
  display: none
 }

示例:

// 绑定一个属性

// 缩写

// 内联字符串拼接

// class绑定
// style绑定
// 绑定一个有属性的对象
// 通过prop修饰符绑定DOM属性
// prop绑定,prop必须在my-component中声明 // 通过$props将父组件的props一起传给子组件

支持JavaScript表达式

示例:

{{number+2}}
{{ da ? '显示' : '不显示' }}
 {{ arr.split('').reverse().join('') }}

Vue.js指令总结


{{message}}



{{val}}
{{message}}

指令缩写








修饰符

修饰符是以半角句号"."指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。

示例:


表单

v-model指令用于在input, select, textarea, checkbox, radio等表单控件元素上创建双向数据绑定,根据表单上的值自动更新绑定的元素的值。




select中使用


 
  请选择
  苹果
  香蕉
  荔枝
 
 默认:{{dada}}


data: {
 dada: 'x'
}

示例:



{{dada}}



 深圳
 北京
 上海
 
{{city}}

示例:


  男
  女
 // input 选中状态改变的时候,下面显示的内容也会改变
 
性别:{{moren}}

示例:


 魔王哪吒
new Vue({  el: '#app',  data: {   url: 'http://www.dadaqianduan.cn',   target: '_blabk'  } })

过滤器的使用,示例

{{ message | capitalize }}

获取表单要提交的数据:

// 表单提交形式

示例:


 
                       

v-model指令的修饰符

如:

示例:

// 在change时而非input时更新


// 用于限制用户输入的时候只能是数字,即使在 type="number"时,HTML输入元素的 值也总会返回字符串


// trim修饰符

v-if指令,v-show指令,v-for指令

  1. v-ifv-elsev-else-if指令

v-else,v-else-if必须在v-if或者v-else-if

  1. v-show指令,用来决定它所在区块显示与否

示例:

v-show="true或false"

v-show仅是显示或者隐藏,值为false时,该元素依旧存在于DOM树中,(设置了display: none,会导致其无法正常显示)v-if是动态的,值为false时,是移除该元素,即是DOM树中不存在该元素

  1. v-for指令用来遍历数组或对象的,可以根据data中的数据动态刷新视图

使用v-for渲染数据时,要将key属性加上,保证这个key的值是唯一并且不重复的,作用是唯一标识数据的每一项,提高渲染性能。

示例:

// 遍历数组
v-for="item in arr"

v-for="(item, index) in arr"

// 遍历对象
v-for="value in obj"

v-for="(value, key, index) in obj"

注意:不能这样去动态刷新视图,第一,使用数组的length属性去更改数组的时候不行,第二,使用索引的方式去更改数组也不行。

可以这样做,Vue.set(arr, index, value)方法,arr表示需要设置的数组,index表示数组索引,value表示该索引项的新值。Vue.set(vm.list, 0, {id: 1, name: 'jeskson'}},或者是调用数组的splice()方法。

示例:

{{x}}

{{y}}


 
  {{item}}
 

示例:

v-for="别名 in 对象"


 
  {{item}}
 


v-for="(value, key) in obj"


 {{key}} : {{value}}


v-for="(value, key, index) in obj">


 {{index}}.{{key}} : {{value}}


// 也可以循环显示整数
v-for="n in 10"


 {{n}}

实现九九乘法表

示例:


  // 内层循环
   
    {{y}}*{{x}} = {{x*y}} |
   
 

样式绑定

属性绑定,对象绑定,数组绑定

示例:






// 绑定数据里的一个对象
魔王哪吒

// 绑定数组
魔王哪吒

内联样式style

示例:

:style="{样式1,样式2,样式n}"

style="font-size: 10px;"
:style="{color: 'red',fontSize: '10px'}"

css1: {fontSize:"10px"},
css2: {color:"red"}
魔王哪吒

三目运算符

示例:

表达式 ? 代码1 : 代码2


事件处理

事件修饰符

示例:

// 阻止单击事件冒泡
魔王哪吒

// 提交事件不再重载页面


// 修饰符可以串联
魔王哪吒

// 只有修饰符


// 添加事件侦听器时使用事件捕获模式
魔王哪吒

// 只当事件在该元素本身触发时回调
魔王哪吒

// click事件只能点击一次

按键修饰符:





// 按键别名:.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right, .ctrl, .alt, .shif, .meta

监听和计算属性

示例:

// 千米之间的转换
watch: {
 qianmi(val) {
  this.qianmi = val;
  this.mi = val*1000;
 },
 mi(val) {
  this.mi = val;
  this.qianmi = val/1000;
 }
}

千米:

米:

购物车

示例:

// 增加 和 减少 购物车的产品数量
// 购物车 总价随之变化
// 对每个购物车产品数量也有一键清0的操作,同时购物车总价也随之变化
shoujiarr: [
 {
  id: 1,
  mingcheng: "iphone 6",
  jiage: 1000,
  shuliang: 1
 },
 {
  id: 2,
  mingcheng: "iphone 7",
  jiage: 2000,
  shuliang: 1
 }
]

totalMoney() {
 var money = 0; // 初始化
 for(var x = 0; x < this.shoujiarr.length; x++) {
  money = money + this.shoujiarr[x].jiage * this.shoujiarr[x].shuliang;
 }
 return money; // 返回值
}

示例:



 
  
  监听属性-简单的购物车
  
  
   table {
    border: 1px solid black;
    width: 100%;
    text-align: center;
   }

   th {
    height: 50%;
   }

   th,
   td {
    border-bottom: 1px solid #ddd;
   }
  
 
 
  
   
   
    
    
     
     
     
     
     
    
    
    
     
     
     
     
     
    
   
序号商品名称商品价格购买数量操作
{{item.id}}{{item.mingcheng}}{{item.jiage}}               -        {{item.shuliang}}        +              清0      
   
总价:{{totalMoney()}}
       

效果:

全选与取消全选

原来也没有那么难!Vue商城开发 | 技术点评_第1张图片

示例:



 
  
  监听属性-选中
  
  

  
 
 
  
   
   
   全选
       baidu        taobao        qq    
   {{jieguo}}        

计算属性

计算属性包括computed,methods,setter

  1. computed属性对象中定义计算属性的方法,在页面上使用{{方法名}}来显示计算结果

  2. 通过getter/setter来显示和监视属性数据

  3. 计算属性存在缓存,多次读取只执行一次getter

  4. 当其依赖的属性值发生变化时,计算属性会重新计算

示例:

computed: {
 // 计算属性的getter
 reversedMessage() {
  return this.message.split('').reverse().join('')
 }
}

示例:



 
  
  监听属性-计算属性
  
  

  
 
 
  
   

原始字符串:{{message}}

   

计算后反转字符串:{{reversedMessage}}

   
   {{message.split('').reverse().join('')}}        

效果:

原来也没有那么难!Vue商城开发 | 技术点评_第2张图片
  1. computed基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。

  2. 使用methods,在重新渲染的时候,函数总会重新调用执行。

示例:



 
  
  监听属性-计算属性
  
  

  
 
 
  
   

原始字符串:{{message}}

   

计算后反转字符串:{{reversedMessage}}

   
   

使用方法后反转字符串:{{reversedMessage2()}}

       

setter

当页面获取某个数据时,会在data里找,找不到就去计算属性里找,在计算属性里获取数据时会自动执行get方法,同时也提供了set方法。

示例:

computed: {
 site: {
  // getter
  get() {
   return this.name + ' ' + this.url
  },
  set(newValue) {
   var names = newValue.split('|')
   this.name = names[0]
   this.url = names[names.length-1]
 }
}

示例:



 
  
  监听属性-计算属性
  
  

  
 
 
  
   

{{ site }}

       

效果:

原来也没有那么难!Vue商城开发 | 技术点评_第3张图片

学习提升:学会使用组件,自定义指令,响应接口,路由,过渡和动画,第三方插件Axios。

组件

普通注册:

// 注册一个全局组件
Vue.component(tagName, options)
// tagName为组件名,options为配置选项

使用方式:

Vue构造器:

// 格式
var 组件内容 = Vue.extend({
 template: '
自定义全局组件,使用Vue.extend
' }) Vue.component("组件名称",组件内容)

组件的使用示例

Vue.component('dada',
 {
  template: '

魔王哪吒,自定义全局组件

'  } } // 创建组件构造器-组件内容 var da = Vue.extend({  template: '

魔王哪吒,自定义全局组件,使用Vue.extend

' }) Vue.component('dada2', da) // 使用组件    

局部组件

使用components属性实现局部注册。

var demoObj = {
 template: '

魔王哪吒

' } // 使用components来注册组件 new Vue({  el: '#app',  components: {   // 定义的局部组件,只有在父模本中使用   'dada': demoObj  } }) // 使用  

props属性

动态props

示例:

Vue.component('child', {
 props: ['myvar'],
 template: '

{{myvar}}

' })

自定义指令

Vue指定以指令语法如下:

Vue.directive(id, definition)
// id是指令ID,definition是定义对象

注册一个全局的自定指令v-focus

Vue.directive('focus', {
 // 当绑定元素插入DOM时
 inserted(el) {
 // 聚焦元素
 el.focus()
 }
})

效果:

原来也没有那么难!Vue商城开发 | 技术点评_第4张图片

示例:



 
  
  监听属性-自定义指令
  
  

  
 
 
  
   

页面载入时,input元素自动获取焦点:

           

钩子函数

  1. bind,只调用一次,指令第一次绑定到元素时调用,可以使用这个钩子函数定义一个在绑定时执行一次的初始化动作。

  2. inserted,被绑定的元素插入父节点时调用。

  3. update,被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。

  4. componentUpdated,被绑定元素所在模本完成一次更新周期时调用。

  5. unbind,只调用一次,指令与元素解绑时调用。

钩子函数的参数

Vue.js响应接口,Vue可以添加数据动态响应接口。

示例:

vm.$watch('counter', function(nval, oval){
 alert();
});

Vue.set

该方法用来设置对象的属性,用来解决Vue无法检测添加属性的问题

Vue.set(target, key, value)
// target 对象或数组, key 可以是字符串或数字, value 可以是任意类型

示例:


计数器:{{products.id}}

点我

Vue.delete

用于删除动态添加的属性

Vue.delete(target, key)
// 仿上面的
...
Vue.delete(myproduct, 'price');

vue-router

使用镜像:

cnpm install vue-router

HTML代码:


 

魔王哪吒

 

  去foo   去bar  

 

JavaScript代码:

// 导入Vue 和 VueRouter,调用Vue.use(VueRouter)
// 定义组件
const Foo = {template: '
foo
'} const Bar = {template: '
bar
'} // 定义路由 const routes = [  {path: '/foo', component:Foo},  {path: '/bar', component:Bar} ] // 创建router实例 const router=new VueRouter({  routes }) // 创建和挂载根实例 const app = new Vue({  router }).$mount('#app')

组件的属性,如to,replace,append,tag,active-class,exact-active-class,event等。

to表示目标路由的链接,点击链接后,把to的值传到router.push()

Home
// 渲染结果
Home

Home

Home

User

Register

replace属性,点击时,会调用router.replace(),而不是router.push(),导航后不会留下history记录


append设置后,在当前路径前添加基路径,变化:

/a -> b // 没有append,则路径为 /b
如果配置了append,则路径为 /a/b


tag渲染成某种标签:

foo
// 渲染结果
  • foo
  • active-class,设置链接激活时使用的CSS类名:

    
    

     Router Link 1     Router Link 2

    exact-active-class:配置当链接被精确匹配时应该激活的class

     Router Link 1     Router Link 2

    event,声明可以用来触发导航事件:

    Router Link
    

    过渡

    效果:

    原来也没有那么难!Vue商城开发 | 技术点评_第5张图片 原来也没有那么难!Vue商城开发 | 技术点评_第6张图片 原来也没有那么难!Vue商城开发 | 技术点评_第7张图片

    示例:

    
    
     
      
      过渡
      
      
       /* 设置持续时间和动画函数 */
       .fade-enter-active, .fade-leave-active {
        transition: opacity 2s;
       }
       .fade-enter, .fade-leave-to {
        opacity: 0;
       }
      
     
     
      
       点我
       
       
        动画效果

               

    Vue在元素显示与隐藏的过渡中,提供了6种切换:

    1. v-enter,定义进入过渡的开始状态

    2. v-enter-active,定义进入过渡生效时的状态

    3. v-enter-to,定义进入过渡的结束状态

    4. v-leave,定义离开过渡的开始状态

    5. v-leave-active,定义离开过渡生效时的状态

    6. v-leave-to,定义离开过渡的结束状态

    Axios

    Axios是一个基于Promise的HTTP库。

    安装:

    npm install axios
    或
    bower install axios
    或
    yarn add axios
    

    GET方法

    new Vue({
     el: '#app',
     data(){
      return {
       info: null
      }
     },
     mounted() {
      axios.get('https://域名/json_demo.json')
      .then(response => (this.info = response.data))
      .catch((error) => { console.log(error); });
     }
    })
    

    传递参数:

    // url上添加参数
    axios.get('/user?ID=123')
    .then((response)=>{console.log(response);})
    .catch((error)=>{console.log(error);});
    
    // params设置参数
    axios.get('/user', {
     params: {
      ID: 123
     }
    })
    .then((response)=>{console.log(response);})
    .catch((error)=>{console.log(error);});
    

    POST方法,传递数据到服务器端

    axios.post('https://域名/demo_axios_post.php')
    .then(response=>(this.info=response))
    .catch((error)=>{console.log(error);})
    
    // 传递参数
    axios.post('/user',{
     name: 'jeskson-魔王哪吒',
     password: 123
    })
    .then(response=>(this.info=response))
    .catch((error)=>{console.log(error);})
    

    执行多个并发请求

    function getUserAccount(){
     return axios.get('/user/123');
    }
    function getUserPermissions(){
     return axios.get('/user/123/permissions');
    }
    axios.all([getUserAccount(),getUserPermissions()])
    .then(axios.spread(function(acct, perms){
     // 两个请求现在都执行完成
    }));
    

    axios api

    axios(config)
    // 发送POST请求
    axios({
     method: 'post',
     url: '/user/123',
     data: {
      name: '魔王哪吒',
      age: 12
     }
    });
    // GET请求
    axios({
     method: 'get',
     url: 'https://xxx',
     responseType: 'stream'
    })
    .then(function(response){
    response.data.pipe(fs.createWriteStream('xxx.jpg'))
    });
    axios(url[,config])
    // 发送get请求
    axios('/user/123');
    

    请求方法的别名

    axios.request(config)
    axios.get(url[,config])
    axios.delete(url[,config])
    axios.head(url[,config])
    axios.post(url[,data[,config]])
    axios.put(url[,data[,config]])
    axios.patch(url[,data[, config])
    

    并发

    axios.all(iterable)
    axios.spread(callback)
    

    响应结构

    axios请求的响应包含诸多信息:

    { // data为由服务器提供的响应
     data: {},
     // status为HTTP状态码
     status: 200,
     // statusText来自服务器响应的HTTP状态信息
     statusText: "OK",
     //headers为服务器响应的头
     headers: {},
     // config是为请求提供的配置信息
     config: {}
    }
    

    拦截器: 在请求或响应被then或catch处理前拦截它们。

    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
     // 在发送请求之前做些什么
     return config;
    }, funtion(error) {
     // 对请求错误做些什么
     return Promise.reject(error);
    });
    
    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
     // 对响应数据做点什么
     return response;
    }, function(error) {
     // 对响应错误做点什么
     return Promise.reject(error);
    });
    
    // 移除拦截器
    var myInterceptor = axios.interceptors.request.use(function() {..});
    axios.interceptors.request.eject(myInterceptor);
    
    // 自定义axios实例添加拦截器
    var instance = axios.create();
    instance.interceptors.request.use(function () {...});
    

    错误处理,示例:

    axios.get('/user/12345')
    .catch(function (error) {
      if (error.response) {
       // 请求已经发出,但服务器响应的状态码不在2xx范围内
       console.log(error.response.data);
       console.log(error.response.status);
       console.log(error.response.headers);
      }else{
       console.log('Error', error.message);
      }
      console.log(error.config);
    });
    

    Vue商城开发

    商城模块:首页,用户,产品,新闻,购物,订单处理等。(图片轮播,精品推荐,用户注册与登录,产品详情,地址管理,完整的购物流程,商品加入,编辑,删除,批量选择,收获地址,下单以及会员中心-订单,收藏,足迹,地址,意见反馈)

    首页

    首页开发

    1. 图片轮播,用来接收广告的。

    2. 快捷菜单的实现和用户登录的判断。

    3. 最新资讯的获取和实现。

    4. 最新上架的产品

    5. 精品推荐的产品

    用户管理

    关于用户的,如用户注册,登录,退出,用户信息修改,用户密码修改,用户收藏管理,用户地址管理等。

    注册:

    进入页面判断是否登录,如果登录进入首页,如果没有进入不了首页,先到登录页面中有注册按钮,注册过程,判断用户的输入信息,如果信息没有错误,则通过注册接口提交注册数据,如果信息有误,在前端判断,输入后就进行判断,不要提交给后端判断。

    手机注册的,注意避免有人捣乱,使用图片验证码,每次发送获取验证码,先填写图片验证码判断正确后才发送获取验证码的接口。注册成功接口返回后提示注册成功,自动跳转到登录页面(避免用户多余操作)

    用户登录

    判断用户是否输入用户名和密码,最好有提示,提交数据到接口判断是否有误,有误重新填写(用户名,密码)。

    会员首页(我的页面)

    顶部的用户信息(头像,用户名,等级或级别,手机号),我的订单菜单(我的订单-全部订单,待付款,待发货,待收货,待评价,这些要清晰给用户看到)以及其他功能(我的收藏,地址管理,用户信息,密码修改,退出登录)

    有的商城软件可以显示必要的页面,进入会员首页,判断是否登录,如用户处于登录状态,不做操作,如不处于登录状态,为了防止错误操作可以弹框提示,跳转到用户登录页面或者弹框提示输入用户名和密码,看需求。

    用户退出

    如果用户想要退出,可以点击退出登录,对应的缓存要清除,实现退出登录的功能,自动跳转到首页。

    用户信息修改

    可以实现,我的头像更换,我的姓名修改,我的性别修改,我的邮箱修改等。

    用户密码修改

    密码修改显示:原始密码(请输入原来的密码),新的密码(请输入新密码),确认密码(请再次输入新密码)。当然你说忘记原始密码,就有个 忘记密码 的功能来修改密码界面,常用手机验证码来直接修改密码。

    用户地址管理

    添加地址(显示):收货人(请输入收货人),手机号(请输入手机号),所在地址,详细地址(请输入详细地址),设为默认功能,可删除添加地址。

    实现产品列表

    底部菜单

    内容有:首页,分类,购物车,会员。

    区分产品购物详情底部有:首页,收藏,购物车,加入购物车,立即购买(有些功能需要根据用户的登录状态来实现不同的代码,登录状态下实现正常,没有登录的提示登录)

    购物-订单模块流程

    实现包括:购物车的实现,在购物车增加或减少商品的数量,单选计费,全选计费,去结算,下单,订单列表,取消订单,去付款,确认收货,产品评论等。

    下单页面

    下单页面(显示):收货地址,下单产品列表信息,配送方式,运费显示,留言(请输入留言内容),总金额(显示金额),下单支付功能按钮等。

    订单列表

    订单列表(显示): 待付款,待发货,待收货,待评论,全部。订单(单号显示,状态,产品信息,数量,总金额,功能按钮状态-取消订单,去付款,确认收货)

    产品评论

    我要去评价,确认收货后,产品评论页面(显示),商品评价(星号显示等效果),留言框(商品满足你的期待吗?说说你的使用心得,分享给想要的他们吧),上传图片展示,匿名评价等,点击发表评论功能。

    回看笔者往期高赞文章,也许能收获更多喔!

    ❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章

    点赞、收藏和评论

    我是Jeskson(达达前端),感谢各位人才的:点赞、收藏和评论,我们下期见!(如本文内容有地方讲解有误,欢迎指出☞谢谢,一起学习了)

    我们下期见!

    文章持续更新,可以微信搜一搜「 程序员哆啦A梦 」第一时间阅读,回复【资料】有我准备的一线大厂资料,本文 http://www.dadaqianduan.cn/#/ 已经收录

    github收录,欢迎Star:https://github.com/webVueBlog/WebFamily

    你可能感兴趣的:(vue,oauth,bi,gridview,cakephp)