包含vuesection的词条

本篇文章给大家谈谈vuesection，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、如何在vue中引入第三方jquery，swiper等库
• 2、如何理解Vue.js的组件中的slot
• 3、vuecli3打包异步组件数量
• 4、Vue实现登录以及登出
• 5、vue-resource 怎么解决跨域问题
• 6、vue点击按钮判断elemnet表格是否为全选状态

如何在vue中引入第三方jquery，swiper等库

一 .引入swiper(全局，局部)

方法一：全局引入，也是最暴力的，但是也是有好处坏处（同时加载，但是不能保证同时下载）

link href="" rel="stylesheet"script src=""/script12

组件中可以直接使用的swiper了

_initSwiper() {        const container = this.$refs.swiper;        const config = {

         effect: 'coverflow',

         slidesPerView: 'auto',

         centeredSlides: true,

         initialSlide: this.activeIndex,

         loop: true,

         autoplay: 1000,

         speed: 1000,

         coverflow: {

           rotate: 0,

           stretch: -30,

           depth: 100,

           modifier: 0.7,

           slideShadows: false,

         },

       };    this.mySwiper = new Swiper(container, config);

}1234567891011121314151617181920

2.方法二：main.js 中

import '../node_modules/swiper/dist/css/swiper.min.css';import 'swiper';12

执行上面的_initSwiper()的方法 即可

3.方法三：局部的引入的，有时只桥历森想的单个组件中使用某一个的库，方法如下

section ref="swiper" class="swiper-container"

 烂散div class="swiper-wrapper"

    div class="demo swiper-slide" v-for="item in colorList" :style="`backgroundColor:${item}`"/div

     /div/sectionscript

 let swiperAsync = import('swiper') //引入的swiper.js（node_modules）的方法

 export default {

 data(){      return {

       colorList: ['red', 'yellow', 'gray', 'pink']

     }

   },

   methods: {

     async _initSwiper() {        let Swiper = await swiperAsync; //异步加载的

       const container = this.$refs.swiper; //ref='swiper'

       const config = {  //swiper的参数配置

         effect: 'coverflow',

         slidesPerView: 'auto',

         centeredSlides: true,

         initialSlide: this.activeIndex,

         loop: true,

         autoplay: 1000,

         speed: 1000,

         coverflow: {

           rotate: 0,

           stretch: -30,

           depth: 100,

           modifier: 0.7,

           slideShadows: false,

     敏亩    },

       };        this.mySwiper = new Swiper(container, config);

     },

   },

   mounted(){      this._initSwiper();

   }

 }/scriptstyle lang="scss" scoped

 /*@import '../assets/styles/swiper.min.css'; !*静态资源的文件*!*/

 @import '../../node_modules/swiper/dist/css/swiper.min.css';/style12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

二 引入的jquery的方法

全局的方法

script src=""/script1

组件中可以直接使用的 ‘$’的方法

局部的方法：

npm install jquery -D1

需要使用的组件中引入

import $ from 'jquery'1

如何理解Vue.js的组件中的slot

主要是让组件的可扩展性更强。

1.匿名slot使用

//定义组件my-componentdiv class="myComponent"slot/slot/div//使喊绝用方法my-componentp我就是slot的替代内容，这里可以放任何标签元素，即使是一长串ulli列表/p塌纤/my-component

2.具名slot使用

//定义组件my-componentdiv class="myComponent"slot name="mySlot"/slot/div//使用方法my-componentp slot="mySlot"我就是这个叫mySlot的slot替代内容，这里可以放任何标签元郑衫姿素，即使是一长串ulli列表，但是我是一个有名字的宝宝，所以你必须给我加上slot="mySlot"，不然我就报错给你看！/p/my-component

如果不在有slot的组件里加入任何标签，slot什么都不会显示的。

[img]

vuecli3打包异步组件数量

有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览器resize的时候我们希望图表也进行resize，因此我们会在父容器组件中写：

mounted() {

setTimeout(() = window.onresize = () = {

this.$refs.chart1.chartWrapperDom.resize()

this.$refs.chart2.chartWrapperDom.resize()

//

}, 200)

destroyed() { window.onresize = null }

这样子图表组件如果跟父容器组件不在一个页面，子组件的状态就被放到父组件进行管理，为了维护方便，我们自然希望子组件的事件和状态由自己来维护，这样在添加删除组件的时候就不需要去父组件挨个修改

1.2 优化

这里使用了lodash的节流throttle函数，也可以自己实现，这篇文章也有节流的实现可以参考一下。 以Echarts为例，在每个图表组件中：

computed: {

/**

* 图表DOM

*/

chartWrapperDom() {

const dom = document.getElementById('consume-analy-chart-wrapper')

return dom Echarts.init(dom)

},//

/**

* 图表resize节流，这里使用了lodash，也可以自己使用setTimout实现节流

*/

chartResize() {

return _.throttle(() = this.chartWrapperDom this.chartWrapperDom.resize(), 400)

}

},

mounted() {

window.addeventListener('resize', this.chartResize)

},

destroyed() {

window.removeEventListener('resize', this.chartResize)

}

2. 全局过滤器注册

2.1 一般情况

官方注册过滤器的方式：

export default {

data () { return {} },

filters:{

orderBy (){

// doSomething

},

uppercase () {

// doSomething

}

}

}

但是我们做项目来说，大部分的过滤器是要全局使用的，不会每每用到就在组件里面去写，抽成全局的会更好些。官方洞轿贺注册全局的方式：

// 注册

Vue.filter('my-filter', function (value) {

// 返回处理后的值

})

// getter，返回已注册的过滤器

var myFilter = Vue.filter('my-filter')

但是分散写的话不美观，因此可以抽出纳派成单独文件。

2.2 优化

我们可以抽出到独立文件，然后使用Object.keys在main.js入口统一注册 /src/common/filters.js

let dateServer = value = value.replace(/(d{4})(d{2})(d{2})/g, '$1-$2-$3')

export { dateServer }

/src/main.js

import * as custom from './common/filters/帆茄custom'

Object.keys(custom).forEach(key = Vue.filter(key, custom[key]))

然后在其他的.vue 文件中就可愉快地使用这些我们定义好的全局过滤器了

template

section class="content"

p{{ time | dateServer }}/p !-- 2016-01-01 --

/section

/template

script

export default {

data () {

return {

time: 20160101

}

}

}

/script

3. 全局组件注册

3.1 一般情况

需要使用组件的场景：

template

Baseinput v-model="searchText" @keydown.enter="search"/

BaseButton @click="search"

BaseIcon name="search"/

/BaseButton

/template

script

import BaseButton from './baseButton'

import BaseIcon from './baseIcon'

import BaseInput from './baseInput'

export default {

components: { BaseButton, BaseIcon, BaseInput }

}

/script

我们写了一堆基础UI组件，然后每次我们需要使用这些组件的时候，都得先import，然后声明components，很繁琐，这里可以使用统一注册的形式

3.2 优化

我们需要借助一下神器webpack，使用 require.context() 方法来创建自己的 模块 上下文，从而实现自动动态require组件。这个方法需要3个参数：要搜索的文件夹目录、是否还应该搜索它的子目录、以及一个匹配文件的正则表达式。 我们在components文件夹添加一个叫componentRegister.js的文件，在这个文件里借助webpack动态将需要的基础组件统统打包进来。

/src/components/componentRegister.js

import Vue from 'vue'

/**

* 首字母大写

* @param str 字符串

* @example heheHaha

* @return {string} HeheHaha

*/

function capitalizeFirstLetter(str) {

return str.charAt(0).toUpperCase() + str.slice(1)

}

/**

* 对符合'xx/xx.vue'组件格式的组件取组件名

* @param str fileName

* @example abc/bcd/def/basicTable.vue

* @return {string} BasicTable

*/

function validateFileName(str) {

return /^S+.vue$/.test(str)

str.replace(/^S+/(w+).vue$/, (rs, $1) = capitalizeFirstLetter($1))

}

const requireComponent = require.context('./', true, /.vue$/)

// 找到组件文件夹下以.vue命名的文件，如果文件名为index，那么取组件中的name作为注册的组件名

requireComponent.keys().forEach(filePath = {

const componentConfig = requireComponent(filePath)

const fileName = validateFileName(filePath)

const componentName = fileName.toLowerCase() === 'index'

? capitalizeFirstLetter(componentConfig.default.name)

: fileName

Vue.component(componentName, componentConfig.default || componentConfig)

})

这里文件夹结构：

components

│ componentRegister.js

├─BasicTable

│ BasicTable.vue

├─MultiCondition

│ index.vue

这里对组件名做了判断，如果是index的话就取组件中的name属性处理后作为注册组件名，所以最后注册的组件为： multi-condition 、 basic-table 最后我们在main.js中import '

components/componentRegister.js'，然后我们就可以随时随地使用这些基础组件，无需手动引入了~

4. 不同路由的组件复用

4.1 场景还原

当某个场景中vue-router从/post-page/a，跳转到/post-page/b。然后我们惊人的发现，页面跳转后数据竟然没更新？！原因是vue-router"智能地"发现这是同一个组件，然后它就决定要复用这个组件，所以你在created函数里写的方法压根就没执行。通常的解决方案是监听$route的变化来初始化数据，如下：

data() {

return {

loading: false,

error: null,

post: null

}

},

watch: {

'$route': { // 使用watch来监控是否是同一个路由

handler: 'resetData',

immediate: true

}

},

methods: {

resetData() {

this.loading = false

this.error = null

this.post = null

this.getPost(this.$route.params.id)

},

getPost(id){ }//

}//

4.2 优化

那要怎么样才能实现这样的效果呢，答案是给 router-view 添加一个不同的key，这样即使是公用组件，只要url变化了，就一定会重新创建这个组件。

router-view :key="$route.fullpath"/router-view

还可以在其后加 + +new Date() 时间戳，保证独一无二

5. 高阶组件

5.1 一般情况

// 父组件

BaseInput :value="value"

label="密码"

placeholder="请填写密码"

@input="handleInput"

@focus="handleFocus"

/BaseInput

// 子组件

template

label

{{ label }}

input :value=" value"

:placeholder="placeholder"

@focus="$emit('focus', $event)"

@input="$emit('input', $event.target.value)"

/label

/template

5.2 优化

1 每一个从父组件传到子组件的props,我们都得在子组件的Props中显式的声明才能使用。这样一来，我们的子组件每次都需要申明一大堆props, 而类似placeholer这种dom原生的property我们其实完全可以使用 $attrs 直接从父传到子，无需声明。方法如下：

input :value="value"

v-bind="$attrs"

@input="$emit('input', $event.target.value)"

attrs" 传入内部组件——在创建更高层次的组件时非常有用。

2 注意到子组件的 @focus="

event)" 其实什么都没做，只是把event传回给父组件而已，那其实和上面类似，完全没必要显式地申明：

input :value="value"

v-bind="$attrs"

v-on="listeners"/

computed: {

listeners() {

return {

...this.$listeners,

input: event =

this.$emit('input', event.target.value)

}

}

}

listeners" 传入内部组件——在创建更高层次的组件时非常有用。

需要注意的是，由于我们input并不是BaseInput这个组件的根节点，而默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。所以我们需要设置 inheritAttrs: false ，这些默认行为将会被去掉，以上两点的优化才能成功。

6. 路由根据开发状态懒加载

6.1 一般情况

一般我们在路由中加载组件的时候：

import login from '@/views/login.vue'

export default new Router({

routes: [{ path:'/login', name:'登陆', component: Login}]

})

当你需要懒加载 lazy-loading 的时候，需要一个个把routes的component改为 () = import('@/views/login.vue') ，甚为麻烦。

当你的项目页面越来越多之后，在开发环境之中使用 lazy-loading 会变得不太合适，每次更改代码触发热更新都会变得非常的慢。所以建议只在生成环境之中使用路由懒加载功能。

6.2 优化

根据Vue的异步组件和Webpack的代码分割功能可以轻松实现组件的懒加载，如：

const Foo = () = import('./Foo.vue')

在区分开发环境与生产环境时，可以在路由文件夹下分别新建两个文件：

_import_production.js

module.exports = file = () = import('@/views/' + file + '.vue')

_import_development.js ，这种写法 vue-loader 版本至少v13.0.0以上

module.exports = file = require('@/views/' + file + '.vue').default

而在设置路由的 router/index.js 文件中：

const _import = require('./_import_' + process.env.NODE_ENV)

export default new Router({

routes: [{ path: '/login', name: '登陆', component: _import('login/index') }]

})

这样组件在开发环境下就是非懒加载，生产环境下就是懒加载的了

7 vue-loader小技巧

vue-loader 是处理 *.vue 文件的 webpack loader。它本身提供了丰富的 API，有些 API 很实用但很少被人熟知。例如接下来要介绍的 preserveWhitespace 和 transformToRequire

7.1 用 preserveWhitespace 减少文件体积

有些时候我们在写模板时不想让元素和元素之间有空格，可能会写成这样：

ul

li1111/lili2222/lili333/li

/ul

当然还有其他方式，比如设置字体的 font-size: 0 ，然后给需要的内容单独设置字体大小，目的是为了去掉元素间的空格。其实我们完全可以通过配置 vue-loader 实现这一需求。

{

vue: {

preserveWhitespace: false

}

}

它的作用是阻止元素间生成空白内容，在 Vue 模板编译后使用 _v(" ") 表示。如果项目中模板内容多的话，它们还是会占用一些文件体积的。例如 Element 配置该属性后，未压缩情况下文件体积减少了近 30Kb。

7.2 使用 transformToRequire 再也不用把图片写成变量了

以前在写 Vue 的时候经常会写到这样的代码：把图片提前 require 传给一个变量再传给组件。

template

div

avatar :default-src="DEFAULT_AVATAR"/avatar

/div

/template

script

export default {

created () {

this.DEFAULT_AVATAR = require('./assets/default-avatar.png')

}

}

/script

其实通过配置 transformToRequire 后，就可以直接配置，这样vue-loader会把对应的属性自动 require 之后传给组件

{

vue: {

transformToRequire: {

avatar: ['default-src']

}

}

}

于是我们代码就可以简化不少

template

div

avatar default-src="./assets/default-avatar.png"/avatar

/div

/template

在 vue-cli 的 webpack 模板下，默认配置是：

transformToRequire: {

video: ['src', 'poster'],

source: 'src',

img: 'src',

image: 'xlink:href'

}

可以举一反三进行一下类似的配置

vue-loader 还有很多实用的 API 例如最近加入的自定义块，感兴趣的各位可以去文档里找找看。

8. render 函数

在某些场景下你可能需要render 渲染函数带来的完全编程能力来解决不太容易解决的问题，特别是要动态选择生成标签和组件类型的场景。

8.1 动态标签

1. 一般情况

比如根据props来生成标签的场景

template

div

div v-if="level === 1" slot/slot /div

p v-else-if="level === 2" slot/slot /p

h1 v-else-if="level === 3" slot/slot /h1

h2 v-else-if="level === 4" slot/slot /h2

strong v-else-if="level === 5" slot/slot /stong

textarea v-else-if="level === 6" slot/slot /textarea

/div

/template

其中level是data中的变量，可以看到这里有大量重复代码，如果逻辑复杂点，加上一些绑定和判断就更复杂了，这里可以利用 render 函数来对要生成的标签加以判断。

2. 优化

使用 render 方法根据参数来生成对应标签可以避免上面的情况。

template

div

child :level="level"Hello world!/child

/div

/template

script type='text/javascript'

import Vue from 'vue'

Vue.component('child', {

render(h) {

const tag = ['div', 'p', 'strong', 'h1', 'h2', 'textarea'][this.level]

return h(tag, this.$slots.default)

},

props: {

level: { type: Number, required: true }

}

})

export default {

name: 'hehe',

data() { return { level: 3 } }

}

/script

8.2 动态组件

当然render函数还有很多用法，比如要使用动态组件，除了使用 :is 之外也可以使用render函数

template

div

button @click='level = 0'嘻嘻/button

button @click='level = 1'哈哈/button

hr

child :level="level"/child

/div

/template

script type='text/javascript'

import Vue from 'vue'

import Xixi from './Xixi'

import Haha from './Haha'

Vue.component('child', {

render(h) {

const tag = ['xixi', 'haha'][this.level]

return h(tag, this.$slots.default)

},

props: { level: { type: Number, required: true } },

components: { Xixi, Haha }

})

export default {

name: 'hehe',

data() { return { level: 0 } }

}

/script

Vue实现登录以及登出

首先先了解一举李下，我们的效果实现流程

登录业务流程

1.在登录页面输入用户名和密码

登录功能实脊册现

{

path:'/login',

name:"login",

component:login,

meta:{

login:true

}

}

// 需要登录的地方定义meta-true 看他需不需要登录

if(to.matched.some(item=item.meta.login)){//需要登录

console.log("需要登录");

if(isLogin){//1.已经登录，直接通过

if(data.error===400){//后端告诉你，登录不樱答宏成功

next({name:'login'})

localStorage.removeItem('token');

return;

}

if(to.name==='login'){

next({name:'Home'})

}else{

next()

}

return;

}

if(!isLogin to.name==='login'){//2.未登录，但要去登录页

next()

}

if(!isLogin to.name !=='login'){//3.未登录，去的也不是登录页

next({name:"login"})

}

}else{//不需要登录直接进

next()

}

2.表单的验证规则，我们用的是Element的组件库

在模板中用Element编写我们的样式布局

div class="login-section"

el-form

label-position="top"

label-width="100px" class="demo-ruleForm"

:rules="rules"

:model="rulesFrom"

status-icon

ref="ruleFrom"

el-form-item label="用户名" prop="name"

el-input type="text" v-model="rulesFrom.name"/el-input

/el-form-item

el-form-item label="密码" prop="password"/el-form-item

el-input type="password" v-model="rulesFrom.password"/el-input

/el-form-item

el-form-item

el-button type="primary" @click="submitFrom('ruleFrom')"提交/el-button

el-button重置/el-button

/el-form-item

/el-form

/div

定义表单的验证规则

详细的看Element官网from表单

在Data里面定义

rulesFrom:{

name:'',

password:''

},

rules:{

name:[

// 验证规则

{required:true,message:'请输入用户名',trigger:'blur'},

{min:1,max:5,message:'长度在1到5个字符',trigger:'blur'}

],

password:[

{required:true,message:'请输入密码',trigger:'blur'},

{min:1,max:5,message:'长度在1到5个字符',trigger:'blur'}

]

}

在methods定义提交事件

// 当我们点击提交的时候能出发方法能拿到表单的所有东西

submitFrom(formName){

this. message.error(data.mes)

}

})

}else{

console.log('error submit!!');

return false

}

})

}

这个时候把登出也写一下在router beforeEach中给他转换

const token=localStorage.getItem('token');

// ！！token转换成布尔类型

const isLogin=!!token;

// 进入路由的时候，需要向后端返送token，验证是否合法

const data=await userInfo();

Store.commit('chageUserInfo',data.data)

vue-resource 怎么解决跨域问题

上一篇我们介绍了如何使用vue resource处理请求，结合服务端的REST API，就能够很容易地构建一个增删查改应用。

这个应用始终遗留了一个问题，Web App在访问REST API时，没有经过任何认证，这使得服务端的REST API是不安全的，只要有人知道api地址，就可以调用API对服务端的资源进行修改和删除。

今天我们就来探讨一下如何结合Web API来限制资源的访问。

本文的主要内容如下：

介绍传统的Web应用和基于REST服务的Web应用

介绍OAuth认证流程和密码模式

创建一个基于ASP. Identity的Web API应用程序

基于$.ajax实现OAuth的注册、登录、注销和API调用

基于vue-resource实现OAuth的注册、登录、注销和API调用

本文的最终示例是结合上一篇的CURD，本文的登录、注册、注销和API调用功能实现的。

35

本文9个示例的源码已放到GitHub，如果您觉得本篇内容不错，请点个赞，或在GitHub上加个星星！

Page Demo GitHub Source

基于$.ajax的示例如下：

注册示例 登录和注销示例 登录获取token并调用API示例 注册、登录、注销、调用API综合示例

基于vue-resource的示例如下：

注册示例 登录和注销示例 登录获取token并调用API示例 注册、登录、注销、调用API综合示例

OAuth介绍

传统的Web应用

在传统的Web应用程序中，前后端是放在一个站点下的，我们可以通过会话（Session）来保存用户的信息。

例如：一个简单的ASP. MVC应用程序，用户登录成功后，我们将用户的ID记录在Session中，假设为Session["UserID"]。

前端发送ajax请求时，如果这个请求要求已登录的用户才能访问，我们只需在后台Controller中验证Session["UserID"]是否为空，就可以判断用户是否已经登录了。

这也是传统的Web应用能够逃避面向无连接拆码郑的方法。

基于REST服务的Web应用

当今很多应用，客户端和旅颂服务端是分离的，服务端是基于REST风格构建的一套Service，客户端是第三方的Web应用，客户端通过跨域的ajax请求获取REST服务的资源。

然而REST Service通常是被设计为无状态的（Stateless），这意味着我们不能依赖于Session来保存用户信息，也不能使用Session["UserID"]这种方式确定用户身份。

解决这个问题的方法是什么呢？常规的方法是使用OAuth 2.0。

对于用户相关的OpenAPI，为了保护用户数据的安全和隐私，第三方Web应用访问用户数据前都需要显式的向用户征求授权。

相比于OAuth 1.0，OAuth 2.0的认证流程更加简单。

专用名词介绍

在了解OAuth 2.0之前，我们先了解几个名词：

Resource：资源，和REST中的资源概念一致，有些资源是访问受保护的

Resource Server：存放资源的服务器

Resource Owner：资源所有者，本文中又称为用户(user)

User Agent：用户代理，即浏览器

Client： 访问资源的客户端，也就是模塌应用程序

Authorization Server：认证服务器，用于给Client提供访问令牌的服务器

Access Token：访问资源的令牌，由Authorization Server器授予，Client访问Resource时，需提供Access Token

Bearer Token：Bearer Token是Access Token的一种，另一种是Mac Token。

Bearer Token的使用格式为：Bearer XXXXXXXX

Token的类型请参考：s://tools.ietf/html/draft-ietf-oauth-v2-15#section-7.1

有时候认证服务器和资源服务器可以是一台服务器，本文中的Web API示例正是这种运用场景。

OAuth认证流程

在知道这几个词以后，我们用这几个名词来编个故事。

简化版本

这个故事的简化版本是：用户(Resource Owner)访问资源(Resource)。

image

具体版本

简化版的故事只有一个结果，下面是这个故事的具体版本：

用户通过浏览器打开客户端后，客户端要求用户给予授权。

客户端可以直接将授权请求发给用户（如图所示），或者发送给一个中间媒介，比如认证服务器。

用户同意给予客户端授权，客户端收到用户的授权。

授权模式(Grant Type)取决于客户端使用的模式，以及认证服务器所支持的模式。

客户端提供身份信息，然后向认证服务器发送请求，申请访问令牌

认证服务器验证客户端提供的身份信息，如果验证通过，则向客户端发放令牌

客户端使用访问令牌，向资源服务器请求受保护的资源

资源服务器验证访问令牌，如果有效，则向客户端开放资源

image

以上几个步骤，(B)是较为关键的一个，即用户怎么样才能给客户端授权。有了这个授权以后，客户端就可以获取令牌，进而通过临牌获取资源。这也是OAuth 2.0的运行流程，详情请参考：s://tools.ietf/html/draft-ietf-oauth-v2-15#section-1.2

客户端的授权模式

客户端必须得到用户的授权（authorization grant），才能获得令牌（access token）。

OAuth 2.0定义了四种授权方式：

授权码模式（authorization code）

简化模式（implicit）

密码模式（resource owner password credentials）

客户端模式（client credentials）

本文的示例是基于密码模式的，我就只简单介绍这种模式，其他3我就不介绍了，大家有兴趣可以看阮大的文章：

://

密码模式

密码模式（Resource Owner Password Credentials Grant）中，用户向客户端提供自己的用户名和密码。客户端使用这些信息，向服务端申请授权。

在这种模式中，用户必须把自己的密码给客户端，但是客户端不得储存密码。这通常用在用户对客户端高度信任的情况下，比如客户端是操作系统的一部分，或者由一个著名公司出品。

image

密码嘛事的执行步骤如下：

（A）用户向客户端提供用户名和密码。

（B）客户端将用户名和密码发给认证服务器，向后者请求令牌。

（C）认证服务器确认无误后，向客户端提供访问令牌。

(B)步骤中，客户端发出的请求，包含以下参数：

grant_type：表示授权类型，此处的值固定为"password"，必选项。

username：表示用户名，必选项。

password：表示用户的密码，必选项。

scope：表示权限范围，可选项。

注意：在后面的客户端示例中，除了提供username和password，grant_type也是必须指定为"password"，否则无法获取服务端的授权。

服务端环境准备

如果您是前端开发人员，并且未接触过ASP. Web API，可以跳过此段落。

image

Authentication选择Individual User Accounts

image

创建这个Web API工程时，VS会自动引入Owin和Asp.Identity相关的库。

image

修改ValuesController，除了IEnumerablestring Get()操作外，其他操作都删除，并为该操作应用[Authorize]特性，这表示客户端必须通过身份验证后才能调用该操作。

public class ValuesController : ApiController

{

// GET: api/Values

[Authorize]

public IEnumerablestring Get()

{

return new string[] { "value1", "value2" };

}

}

添加Model, Controller

image

image

image

初始化数据库

image

执行以下3个命令

image

image

执行以下SQL语句：

显示代码

CustomersController类有5个Action，除了2个GET请求外，其他3个请求分别是POST, PUT和DELETE。

为这3个请求添加[Authorize]特性，这3个请求必须通过身份验证才能访问。

隐藏代码

public class CustomersController : ApiController

{

private ApplicationDbContext db = new ApplicationDbContext();

// GET: api/Customers

public IQueryableCustomer GetCustomers()

{

return db.Customers;

}

// GET: api/Customers/5

[ResponseType(typeof(Customer))]

public async TaskIActionResult GetCustomer(int id)

{

Customer customer = await db.Customers.FindAsync(id);

if (customer == null)

{

return NotFound();

}

return Ok(customer);

}

// PUT: api/Customers/5

[Authorize]

[ResponseType(typeof(void))]

public async TaskIActionResult PutCustomer(int id, Customer customer)

{

// ...

}

// POST: api/Customers

[Authorize]

[ResponseType(typeof(Customer))]

public async TaskIActionResult PostCustomer(Customer customer)

{

// ...

}

// DELETE: api/Customers/5

[ResponseType(typeof(Customer))]

[Authorize]

public async TaskIActionResult DeleteCustomer(int id)

{

// ...

}

}

让Web API以CamelCase输出JSON

在Global.asax文件中添加以下几行代码：

var formatters = GlobalConfiguration.Configuration.Formatters;

var jsonFormatter = formatters.JsonFormatter;

var settings = jsonFormatter.SerializerSettings;

settings.Formatting = Formatting.Indented;

settings.ContractResolver = new CamelCasePropertyNamesContractResolver();

启用CORS

在Nuget Package Manager Console输入以下命令:

Install-Package Microsoft.Asp.WebApi.Cors

在WebApiConfig中启用CORS：

public static class WebApiConfig

{

public static void Register(Configuration config)

{

var cors = new EnableCorsAttribute("*", "*", "*");

config.EnableCors(cors);

// ...

}

}

类说明

在执行上述步骤时，VS已经帮我们生成好了一些类

image

IdentityModels.cs：包含ApplicationDbContext类和ApplicationUser类，无需再创建DbContext类

public class ApplicationUser : IdentityUser

{

// ...

}

public class ApplicationDbContext : IdentityDbContextApplicationUser

{

// ...

}

Startup.Auth.cs：用于配置OAuth的一些属性。

public partial class Startup

{

public static OAuthAuthorizationServerOptions OAuthOptions { get; private set; }

public static string PublicClientId { get; private set; }

// For more information on configuring authentication, please visit ://go.microsoft./fwlink/?LinkId=301864

public void ConfigureAuth(IAppBuilder app)

{

// ..

// Configure the application for OAuth based flow

PublicClientId = "self";

OAuthOptions = new OAuthAuthorizationServerOptions

{

TokenEndpointPath = new PathString("/Token"),

Provider = new ApplicationOAuthProvider(PublicClientId),

AuthorizeEndpointPath = new PathString("/api/Account/ExternalLogin"),

AccessTokenExpireTimeSpan = TimeSpan.FromDays(14),

// In production mode set AllowInsecure = false

AllowInsecure = true

};

// Enable the application to use bearer tokens to authenticate users

app.UseOAuthBearerTokens(OAuthOptions);

// ..

}

}

这些OAuth配置项，我们只用关注其中的两项：

TokenEndpointPath：表示客户端发送验证请求的地址，例如：Web API的站点为.，验证请求的地址则为。

UseOAuthBearerTokens：使用Bearer类型的token_type（令牌类型）。

ApplicationOAuthProvider.cs：默认的OAuthProvider实现，GrantResourceOwnerCredentials方法用于验证用户身份信息，并返回access_token（访问令牌）。

public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)

{

// ...

}

通俗地讲，客户端输入用户名、密码，点击登录后，会发起请求到。

token这个请求在服务端执行的验证方法是什么呢？正是GrantResourceOwnerCredentials方法。

客户端发起验证请求时，必然是跨域的，token这个请求不属于任何ApiController的Action，而在WebApiConfig.cs中启用全局的CORS，只对ApiController有效，对token请求是不起作用的。

所以还需要在GrantResourceOwnerCredentials方法中添加一行代码：

public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)

{

context.Response.Headers.Add("Access-Control-Allow-Origin", new []{"*"});

// ...

}

IdentityConfig.cs：配置用户名和密码的复杂度，主要用于用户注册时。例如：不允许用户名为纯字母和数字的组合，密码长度至少为6位…。

隐藏代码

public static ApplicationUserManager Create(IdentityFactoryOptionsApplicationUserManager options, IOwinContext context)

{

var manager = new ApplicationUserManager(new UserStoreApplicationUser(context.GetApplicationDbContext()));

// Configure validation logic for usernames

manager.UserValidator = new UserValidatorApplicationUser(manager)

{

AllowOnlyAlphanumericUserNames = false,

RequireUniqueEmail = true

};

// Configure validation logic for passwords

manager.PasswordValidator = new PasswordValidator

{

RequiredLength = 6,

RequireNonLetterOrDigit = true,

RequireDigit = true,

RequireLowercase = true,

RequireUppercase = true,

};

// ...

return manager;

}

使用Postman测试GET和POST请求

测试GET请求

image

GET请求测试成功，可以获取到JSON数据。

测试POST请求

image

POST请求测试不通过，提示：验证不通过，请求被拒绝。

基于$.ajax实现注册、登录、注销和API调用

服务端的环境已经准备好了，现在我们就逐个实现用户注册、登录，以及API调用功能吧。

注册

页面的HTML代码如下：

div id="app"

div class="container"

span id="message"{{ msg }}/span

/div

div class="container"

div class="form-group"

label电子邮箱/label

input type="text" v-model="registerModel.email" /

/div

div class="form-group"

label密码/label

input type="text" v-model="registerModel.password" /

/div

div class="form-group"

label确认密码/label

input type="text" v-model="registerModel.confirmPassword" /

/div

div class="form-group"

label/label

button @click="register"注册/button

/div

/div

/div

创建Vue实例，然后基于$.ajax发送用户注册请求：

var demo = new Vue({

el: '#app',

data: {

registerUrl: '://localhost:10648/api/Account/Register',

registerModel: {

email: '',

password: '',

confirmPassword: ''

},

msg: ''

},

methods: {

register: function() {

var vm = this

vm.msg = ''

$.ajax({

url: vm.registerUrl,

type: 'POST',

dataType: 'json',

data: vm.registerModel,

success: function() {

vm.msg = '注册成功！'

},

error: vm.requestError

})

},

requestError: function(xhr, errorType, error) {

vue点击按钮判断elemnet表格是否为全选状态

主要代码如下：

template

    div style="height: 100%;" v-loading.lock="loading"

        section style="height: 100%; overflow-y: scroll;"

            el-card class="box-card"

                div slot="header" class="clearfix"

                        el-button type="primary" @click="show"判断是否全选/el-button  状态：{{msg}}

                /div

                el-table :data="tableData" border style="width: 100%" header-row-class-name="headerRowClass" @selection-change="handleSelectionChange"

                    el-table-column type="伍慎selection" width="55"

                    /el-table-column

                    el-table-column label="序仿猜号" type="index" width="70"

                    /el-table-column

                    el-table-column prop="name" label="演练名称" width="200px"

                    /el-table-column

                /el-table

            /el-card

        /section

    /div

/template

script

    export default {

        data() {

            return {

                multipleSelection:[],

                tableData: [

                    {

                        name: "数据1",

                    },

                    {

                        name: "数据2",

                    }

                ],

                msg:""

            }

        },

        methods: {

            //判断是否全选

            show() {

                if(this.tableData.length==this.multipleSelection.length){

                    this.msg='全选';

                }else{

                    this.msg='没有全选';

                }

            },

            // 选择发生改变是执行

            handleSelectionChange(val){

                腔大敬this.multipleSelection = val;

            },

        },

    }

/script

运行截图：

当选择一个时点击“判断是否全选按钮”显示如下：

当全部选择时点击“判断是否全选按钮”显示如下：

关于vuesection和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。