[最近有点忙]vue多项目nginx部署,二级目录部署

【最近有点忙干货很多,慢慢来写】

有时候我们单页项目不一定要部署在根目录下,二级目录可能是您想要的,那么看下面步骤

1. 入口文件index.html文件修改

添加 <meta base=”/ weixin/”>

 

 

 

 

 

 

2. config/index.js文件修改

修改 assetsPublicPath: ‘/weixin/’

 

 

 

 

 

 

 

 

3.src/router/index.js文件修改

添加 base: ‘/weixin/’

 

 

 

 

最后 Nginx配置修改

server {
 listen 9900;
 server_name localhost;
 location /lend {
     try_files $uri $uri/ /weixin/index.html;
 }
 }

 

Vue单页应用结合后台做第三方登录[QQ授权登录](二)

前言

第三方qq登录我们可以直接利用qq登录的JSdk很方便

文档说明:http://wiki.open.qq.com/wiki/website/JS_SDK%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E

示例代码文档:https://connect.qq.com/intro/login/jssdk-demo

流程

在vue入口index.html中头部引入qq的sdk,在其他页面钩子函数中即可使用qqskd的函数

qq登录流程比较简单,我就稍微说一下

1.在vue页面上点击qq登录跳转到授权页面

2.授权成功后进入回调页面

3.回调页面可以执行一下自己的逻辑,我这边回调页面弄得是后台页面,你也可以是前端的,回调中处理完自己逻辑后可以回跳回来

4.然后在页面中就可以检测到qq是否登录了,看下面代码

 

created(){
   this.test(this.code)
   this.testqq()
},
methods:{
   testqq(){
      if(QC.Login.check()){  //如果已登录
          //这里做自己逻辑处理
         });
      }

   }
}

Vue单页应用结合后台做第三方登录[微信扫一扫登录授权登录](一)

前言

在之前的mvc开发中,相信大家都也能很熟练的做出结合微信登录qq登录等的第三方登录,今天我这主要说一下前后端分离模式中的第三方登录流程

在说微信登录之前我首先跟大家说一下微信的access_token 在微信中access_token是有俩种的,大家一定要分别仔细,一个是网页授权获取到的access_token,这个token是一次性的,只能获取到一个微信用户信息,是与微信用户一对一的关系,而另外一个基础access_token是专门请求获取token接口拿到的,这个有效期是7200s,大家一定要区分开这俩个token.在今天所说的微信登录中

我首先用一幅图说明一下大致流程(扫一扫登录和微信内授权登录流程大致一样)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

网站应用微信登录开发指南

微信文档:

https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=f4f77621bb28701905b55092c32eab02b718d258&lang=zh_CN

扫一扫登录,大致流程我图中已经给出来了,其实这只是一个流程,并不是最简单的,只要你明白了,你也可以有你自己的流程

前端跳转到微信扫一扫界面

第三方使用网站应用授权登录前请注意已获取相应网页授权作用域(scope=snsapi_login),则可以通过在PC端打开以下链接:
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
若提示“该链接无法访问”,请检查参数是否填写错误,如redirect_uri的域名与审核时填写的授权域名不一致或scope不为snsapi_login。

在回调的url中,我们可以拿到code,然后把这个code给前端,让前端拿着code去请求我们登录接口,然后成功直接返回登录信息前端直接保存即可

 

vue2 过滤器 | 过滤时间 Monent.js的使用

第一步:安装

npm install moment --save 

第二步:在main.js中引用

import moment from 'moment/moment'

第三步:在main.js中添加过滤器

Vue.filter('moment', function (value, formatString) {
    formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
    // return moment(value).format(formatString); // value可以是普通日期 20170723
    return moment.unix(value).format(formatString); // 这是时间戳转时间
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

第四步: 在vue页面中使用过滤器

<template>
  <div id="app">
      <div>
        {{ datetime | moment }}
      </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      datetime: '1500799859'
    }
  }
}
</script>

elementUI Message 独立引入的用法

今天在做项目时候,用到了 elementUI 的 Message 组件。因为我是按需 import 引入的方法,结果按照原本的文档API代码不生效。

查看文档之后有俩种引入方法:

全局引入

import ElementUI from ‘element-ui’;

Vue.use(ElementUI);

按需引入

import { Button, Select } from ‘element-ui’;

Vue.use(Button)

Vue.use(Select)

简答来说,如果是全局引入的话,就可以直接使用this.$message,但是按需引入的话能不能像全局引入一样用 this.$message 呢?

问题原因及解决:

查看下 element-ui/package/message/index.js 的实现方法,结果发现:

import Message from './src/main.js';
export default Message;

直接返回了。

而其他的组件,一般都是有 install 方法供Vue来操作的。

知道问题所在就好解决了,给 Message 添加 install 方法就行了。

// 和其他组件一样,一并引入
import {Button, Message} from 'element-ui'

// 在调用 Vue.use 前,给 Message 添加 install 方法
Message.install = function (Vue, options) {
  Vue.prototype.$message = Message
}

// 和所有组件一样,一并进行use
Vue.use(Button)
Vue.use(Message)

当然,也可以不用 Vue.use 来实现,比如直接写在 Vue 实例上:

// 和其他组件一样,一并引入
import {Button, Message} from 'element-ui'

Vue.use(Button)

// 将 Message 直接挂在 Vue 实例上
Vue.prototype.$message = Message

[Laravel5.4+自身集成Vue2初体验–续]laravel5.4的laravel-mix踩坑记

Laravel5.4 其实坑不少、这里说明一下

第一坑:cross-env目录不对

编译的时候会报错:node_modules/cross-env/bin/cross-env.js: No such file or directory

修改方案是修改package.json下面的node_modules/cross-env/bin/cross-env.js为node_modules/cross-env/dist/bin/cross-env.js  目录名称写错了

第二坑:laravel-mix版本太低

fallbackLoader option has been deprecated – replace with “fallback”
loader option has been deprecated – replace with “use”
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
– configuration.output.path: The provided value “public” is not an absolute path!

要把package.json里面laravel-mix版本改成

“laravel-mix”: “^0.10.0”,

然后再执行 npm install

第三坑:X-CSRF-TOKEN问题

第一次使用,通常会遇到一个X-CSRF-TOKEN的错误,编译完成,前端页面启动过程抛异常

Uncaught TypeError: Cannot read property ‘csrfToken’ of undefined
at Object.<anonymous> (app.js:40921)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:11198)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:40943)
at __webpack_require__ (app.js:20)
at app.js:66
at app.js:69

查看编译后的app.js,发现有一段对X-CSRF-TOKEN的处理,默认是从window.Laravel中获取

window.axios.defaults.headers.common = {
 'X-CSRF-TOKEN': window.Laravel.csrfToken,
 // 'X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
 'X-Requested-With': 'XMLHttpRequest'
};

这个变量没有设置,因此报错。

顺藤摸瓜,查源头,入口文件app.js 引用了一个资源文件 resources/assets/js/bootstrap.js,其中对X-CSRF-TOKEN有定义

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

解决方案:

因为很多时候中间件也会检查CSRF-TOKEN,所以通常我们都习惯在模板文件中设置meta标记来保存CSRF-TOKEN,因此从这里统一获取,处理方式一致

<meta name=csrf-token content={{ csrf_token() }}>

因此,修改bootstrap.js对应代码为:

window.axios = require('axios'); window.axios.defaults.headers.common = {
 'X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').getAttribute('content'), 
 'X-Requested-With': 'XMLHttpRequest' };

Laravel5.4+自身集成Vue2初体验

Laravel 本身对前端开发就提供了很多支持,5.3 更是直接引入了 Vue 这个目前最流行的轻量级前端框架,这篇文章使用一个简单的例子说明一下怎么在laravel中直接使用vue,从而让让前端开发和后端无缝。

首先声明: 在测试这个5.4版本的时候遇到过很多坑,将集中在这一篇文章中说明

[Laravel5.4+自身集成Vue2初体验–续]laravel5.4的laravel-mix踩坑记

1.新建Laravel5.4项目,安装依赖包,配置虚拟主机

我这里下载laravel包直接是在网页下的,当然你也可以使用Compose来下载新建项目

composer create-project --prefer-dist laravel/laravel Laravel54 // 新项目名为 Laravel54
cd Laravel54 //切换项目目录
npm install // 速度慢的请自行切换淘宝镜像 cnpm安装

安装完前端依赖之后目录大致如下:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

配置虚拟主机这里不作过多介绍,入口目录为public

2.修改路由文件,新建hello.vue组件

修改 routes/web.php 文件为:

Route::get('/', function () {
    return view('index');
});

在 resources/assets/js/components 目录下新建 Hello.vue 文件:

<template>
    <div>
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: 'Hello World'
        }
    }
}
</script>

3.修改 app.js 文件,渲染组件,新建 Laravel 视图文件,加入vue组件

//Vue.component('example', require('./components/Example.vue'));//注释掉原来的默认组件
Vue.component('hello', require('./components/Hello.vue'));//引入hello组件

在 resources/views 目录下新建 index.blade.php 文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div id="app">
    <!--这里加入hello组件-->
    <hello></hello>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

说明:你可能在其他教程中看到有的在使用 assets 函数,这两个函数的主要区别就是 assets 函数会直接使用所填路径去 public 文件夹下找文件,而 mix 函数会自动加载带 hash 值的前端资源。这是和 Laravel 前端资源的缓存刷新相关的

4.编译运行

npm run dev

VueTP_前后端通用管理框架

VueTP是一套基于Vue2.x + iview + axios+ Thinkphp5的前后端通用管理自适应框架^_^

实现了一般前端后台所需要的功能模块,出发目的是以学习vue2和架构thinkphp框架

thinkphp后端采用restful接口风格,前端主要采用vue.js,是thinkphp5和vue的结合产物

目前分为俩个端Admin端和User端

主要适用技术栈

  • 后端框架:ThinkPHP 5.x
  • 前端MVVM框架:Vue.JS 2.x
  • 数据交互:Axios
  • UI框架:iview

本开源项目仅供大家学习学习和参考。