Vue-Cli实现登录/注册/博客demo总结

demo总结

记录小组demo小项目，其中前端demo分为三期：

• 第一期：完成登陆注册[前端：画页面，登陆注册的请求发送；后端：登陆注册的接口开发，并将数据存入数据库]

• 第二期：前端拿vue重构[使用组件和cli脚手架]

• 第三期：添加文章和阅读文章[主页面可以直接访问，默认未登录状态，可以阅读文章，不能添加文章，登陆后即可添加文章；后端完成相关接口开发]

demo2目录

├── README.md
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── img
│   │   └── logo.png
│   ├── components
│   │   ├── AddBlog.vue 
│   │   ├── Err.vue  
│   │   ├── Login.vue
│   │   ├── Register.vue
│   │   ├── ShowBlog.vue
│   │   └──Helloworld.vue
│   ├── views
│   │   ├── Login.vue 
│   │   ├── Register.vue
│   │   ├── Blog.vue
│   │   └── Home.vue
│   ├── main.js
│   ├── router // 路由配置文件
│   │   └── router.js  
│   └── store
│       └── store.js  
└── babel.config.js
└── package.json

重点代码

路由守卫

​ 在main.js下添加全局路由守卫，在router.js的路由文件下为需要登录验证的页面添加路由守卫，在本demo2中AddBlog.vue需要登录验证，故在其路由下添加meta{ requireLogin:true }，当然这种方法是不安全的。

router.beforeEach((to, from ,next)=>{
    if(to.matched.some(record => record.meta.requireLogin)){//此页面是否需要登录验证
      if (window.sessionStorage.isLogin === '1') {
        next()
      } else if (to.path !== '/Login') {
        next({path: '/Login'}) //跳转到登录页面
        window.alert('检测到您还未登录,请登录后操作~')
      }
    } else {
      next()//此页面不需要登录验证
    }
})

展示博客

<template>
  <div id="show-blogs">
    <div v-for="blog in filteredBlogs" class="single-blog":key="blog.title">//使用v-for遍历
    	<article>
          <p><b>博客标题:</b> {{blog.title}}</p>
          <p><b>博客内容:</b></p>
          <p>{{blog.body}}</p>
    	</article>
    </div>
  </div>
</template>

<script>

export default {
  name: 'show-blogs',
  data(){
  	    return {
  		      blogs:[],//接收数据
              search:""
        }
    },
  created(){
  	//这里是一个api
    this.$http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){
        console.log(data);
        return data.data;//后端返回一个数组
  		})
      .then((data) => {
        	var blogsArray = [];
        	for(let key in data){//根据key遍历
         	data[key].id = key;
         	blogsArray.push(data[key]);//将后端数据push到blogArray中
        }
        this.blogs = blogsArray;//将blogArray赋给blogs
      })
  }
}

搜索博客

computed:{
  	filteredBlogs:function(){
  		return this.blogs.filter((blog) =>{
  			return blog.title.match(this.search);//根据标题搜索
  		})
  	}
 }

Axios中的post（坑）

​ 在使用axios进行post请求时，最好使用字符串json存储数据，并且若后端接受的是json形式，则需要修改请求头为Content-Type": "application/json; charset=utf-8进行post请求，否则后端虽接受到请求，但没有json信息。

​ 并且reponse不可以赋给新变量后使用新变量操作，只能保持原有的格式进行后续判断

this.axios.post('url',{username: _this.data.username,password: _this.data.password},{
            "headers": {"Content-Type": "application/json; charset=utf-8"}
 		 	}).then((response)=>{
		 		if(response.data.message === "Ok"){
					this.registered=true
					// window.location.hash='Blog'
				}else if(response.data.message === "Confict"){
					window.alert("此用户名已存在，请重新设置!");
					this.$router.push('/Register');
				}else{
					this.$router.push('/Err');
				}
             }).catch((error)=>{
		 			this.$router.push('/Err');
                 	console.log(error)
		 	}) 

服务器部署

​ 使用npm run build后生成一个dist文件，将dist文件放在niginx的根目录下(在阿里云服务器下是www文件目录下yo)。