Vue二手书商城:(一)项目介绍

一.项目动图演示

项目演示

二.打开项目看看

1.把项目clone到本地。

2.在项目根目录执行npm install命令就可以把项目所需的包安装。

3.执行命令npm run dev，项目就可以在localhost:9000打开，如果你的9000端口被占用了就在webpack.config.js改个别的端口。

4.这样就是成功了。

运行成功

展开全文 >>

响应式布局

一.为什么要响应式布局

不同设备的屏幕大小不同，网页要在不同大小屏幕上正常显示就需要响应式布局（网页布局随屏幕大小改变）。

二.方法

  • 超出则隐藏(overflow)文字折行(word-break/overflow-wrap)自适应(浮动/绝对定位/flexbox/table-cell/grid)
  • viewport：<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  • media query
1
@media(max-width:xxxpx){
2
  .wrap{display:none;}
3
}
  • 相对大小(%/vh/vw/rem)
    • vh/vw：viewport高度/宽度分为100份，xxvh占viewport高度xx份
    • rem
1
@media(max-width:xxxpx){
2
/*r:root,以后样式大小以html的字体大小为根据，写作xxxrem,不同屏幕大小的html的字体大小不一样，则其他样式的大小也相应改变。还有一种是em,参考对象是父元素文本大小*/
3
  html{font-size:xxpx;}
4
}
  • Bootstrap的栅格布局

展开全文 >>

Bootstrap使用

官方文档：https://v3.bootcss.com/
菜鸟教程：https://www.runoob.com/bootstrap/bootstrap-tutorial.html

一.基础用法

  • 基本样式

    • 排版(标题、页面主体、内联文本元素……)
    • 代码(<code>、<pre>……)
    • 表格(基本、条纹状、带边框、鼠标悬停……)
    • 表单、按钮、图片、辅助类、响应式实用工具……

  • 布局组件

    • 下拉菜单、按钮组、导航元素、导航栏、分页、缩略图、进度条、多媒体对象、列表组……

  • 基本样式和布局组件用法：引入文件 –> 加标签/加class

展开全文 >>

Ajax使用

一.原生js中使用

1
//1.创建一个XMLHttpRequest类型的对象
2
var xhr = new XMLHttpRequest()
3
//2.确定对象发送方式、协议方法，打开连接
4
//open()方法第三个参数要求传入的是bool值，作用是设置请求是否异步执行，默认true，传false同步执行，同步方式执行要先注册事件再调用send，否则readystatechange无法触发
5
xhr.open('GET', './login.php')
6
//3.通过连接发送一次请求
7
xhr.send(null)
8
//4.响应，判断状态码，指定xhr状态变化事件处理函数
9
xhr.onreadystatechange = function () {
10
//通过xhr的readyState判断此次请求的响应是否接收完成
11
    if (this.readyState === 4) {
12
    //通过xhr的responseText获取到响应的响应体
13
    console.log(this)
14
    }
15
}

二.jquery中使用

1
$.ajax({
2
    url: './login.php',//请求地址
3
    type: 'post',//请求方法
4
    dataType: 'json',//服务端响应数据类型
5
    data: { id: 1 },//需要传递到服务端的数据
6
    beforeSend: function () {//请求发起之前触发
7
    	console.log('before')
8
    },
9
    success: function (data) {//请求成功之后触发
10
    	console.log(data)
11
    },
12
    error: function (err) {//请求失败触发
13
    	console.log(err)
14
    },
15
    complete: function () {//请求完成触发
16
    	console.log('completed')
17
    }
18
})

还有$.get和$.post方法不用写type，方便快捷。

展开全文 >>

Vue:(五)Vuex

Vuex可以保存组件之间的共享数据，相当于一个全局的数据仓库，所有组件都可以获取和修改数据。组件内私有的数据可以放到组件的data中。props中存放的是父组件传过来的数据。

一.state&mutations

1
//新建store.js文件
2
import Vue from 'vue'
3
import Vuex from 'vuex'
4
Vue.use(Vuex)
5
6
const store = new Vuex.Store({
7
  state: {//类似组件中的data
8
    count: 0
9
  },
10
  mutations: {//类似组件中的methods，操作数据
11
    increment (state) {
12
      state.count++
13
    }
14
  }
15
})
16
//在组件中可以通过this.$store.state获取状态对象，通过this.$store.commit方法触发状态变更
17
this.$store.commit('increment')
18
console.log(this.$store.state.count) // -> 1

展开全文 >>

Vue:(四)生命周期

生命周期

刚初始化的vue实例对象上，只有一些默认的生命周期函数和默认事件。生命周期函数和普通函数没什么区别，不过生命周期函数是你初始化实例对象时它就有的，使用时注意操作的对象在这个生命周期函数执行前是否已经初始化好了。

1
//例：
2
data(){
3
  return{
4
    book: []
5
  }
6
},
7
created(){//created函数执行时data已经初始化好了，可以操作了
8
  axios.get('/book', {
9
    params: {
10
      ID: 12345
11
    }
12
  })
13
  .then(function (response) {
14
    this.book = response.data
15
  })
16
}

展开全文 >>

Vue:(三)通信

Axios

Axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios主要是用于向后台发起请求的，还有在请求中做更多可控功能。官方不再维护vue-resource，推荐使用axios。

axios：https://www.kancloud.cn/yunye/axios/234845

1.Axios引入

  • <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  • npm install axios --save

2.基础API

  • axios.request(config)

  • axios.get(url[, config])

  • axios.delete(url[, config])

  • axios.head(url[, config])

  • axios.options(url[, config])

  • axios.post(url[, data[, config]])

  • axios.put(url[, data[, config]])

  • axios.patch(url[, data[, config]])

展开全文 >>

Vue:(二)VueRouter

一.基础介绍

  • vue-router用来构建SPA(单页面应用)
  • 什么是前端路由？
    • 路由是根据不同url地址展示不同的内容或页面
    • 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面实现的
  • 什么时候使用前端路由？
    • 在单页面应用，大部分页面结构不变，只改变部分内容的使用
  • 前端路由的优缺点：
    • 优点：
      • 用户体验好，不用每次都从服务器全部获取，可以快速展现给用户
    • 缺点：
      • 不利于SEO
      • 使用浏览器的前进/后退键时会重新发送请求，没有合理地利用缓存
      • 单页面无法记住之前滚动的位置，无法在前进/后退时记住滚动的位置
  • 分类：
    • 动态路由匹配
    • 嵌套路由
    • 编程式路由
    • 命名路由和命名视图（很少用）

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

办法总比困难多