3分度

3分度 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

55

个人动态

3分度 收藏了文章 · 2019-05-22

vue+axios新手实践实现登陆

其实像这类的文章网上已经有很多很好的,写这篇文章,相当于是做个笔记,以防以后忘记
用到的:1、 vuex 2、axios 3、vue-route

登陆流程为:1、提交登陆表单,拿到后台返回的数据
2、将数据存入vuex

vuex配置

这里直接跳过安装之类的,百度一大堆,我直接上代码

// store index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 初始化时用sessionStore.getItem('token'),这样子刷新页面就无需重新登录
const state = {
  user: window.sessionStorage.getItem('user'),
  token: window.sessionStorage.getItem('token')
}
const mutations = {
  //将token保存到sessionStorage里,token表示登陆状态
  SET_TOKEN: (state, data) => {
    state.token = data
    window.sessionStorage.setItem('token', data) 
  },
  //获取用户名
  GET_USER: (state, data) => {
    // 把用户名存起来
    state.user = data
    window.sessionStorage.setItem('user', data)
  },
  //登出
  LOGOUT: (state) => {
    // 登出的时候要清除token
    state.token = null
    state.user = null
    window.sessionStorage.removeItem('token')
    window.sessionStorage.removeItem('user')
  }
}

const actions = {
}
export default new Vuex.Store({
  state,
  mutations,
  actions
})

1、我在这里是将登录状态token,和用户名user存在sessionStorage里,以便组件使用,如果token为true则表示用户已经登陆sessionStorage和token这两个东西很简单用法自行百度
2、不要忘了在main.js引入store,vue实例中也要加入store
main.js


import store from './store/index'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

vue-route配置

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login'
import Activity from '../components/Activity'
import Index from '../components/Index'
import store from '../store/index'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: '/',
      component: Index
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/activity',
      name: 'activity',
      component: Activity,
      meta: {
        requireAuth: true // 添加该字段,表示进入这个路由是需要登录的
      }
    }
  ]
})

// 注册全局钩子用来拦截导航
router.beforeEach((to, from, next) => {
  const token = store.state.token
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if (token) { // 通过vuex state获取当前的token是否存在
      next()
    } else {
      console.log('该页面需要登陆')
      next({
        path: '/login'
        // query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
      })
    }
  } else {
    next()
  }
})

export default router

这里我用到router.beforeEach来实现拦截登陆,
1、在需要验证的路由的meta里加入我们自己的requireAuth
2、router.beforeEach里通过requireAuth验证该组件是否需要登陆
3、验证token如果为flase就表示未登陆跳转到登录页

axios发送请求

submitLogin () {
  this.$refs.loginForm.validate(valid => {
    if (valid) {
      axios.post('/login', {
        user: this.loginForm.user,
        pass: this.loginForm.pass
      })
        .then((response) => {
          if (response.status === 200) {
            this.$store.commit('SET_TOKEN', response.data.token)
            this.$store.commit('GET_USER', response.data.user)
            this.$message({
              message: '登陆成功',
              type: 'success'
            })
            this.$router.push({name: 'activity'})
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    } else {
      console.log('error submit!!')
      return false
    }
  })
},

后台我没写,是用mock.js拦截ajax请求
因为我用的是element-ui所以上面代码有一些直接无视,看核心的就行
1、在数据返回成功后用this.$store.commit来更新vuex里的数据
2、登陆成功后跳转this.$router.push()跳转页面,
这里注意,如果你在前面导航拦截的钩子用了query: {redirect: to.fullPath}的话,
这里就 用 this.$router.push(this.$route.query.redirect);这样页面就能跳到
你跳到登陆页面前要去的那个路由了

那个TOKEN我这里也没有使用,就是在页面请求的时候带上这个TOKEN,与后端核对。

查看原文

3分度 赞了文章 · 2019-05-22

vue+axios新手实践实现登陆

其实像这类的文章网上已经有很多很好的,写这篇文章,相当于是做个笔记,以防以后忘记
用到的:1、 vuex 2、axios 3、vue-route

登陆流程为:1、提交登陆表单,拿到后台返回的数据
2、将数据存入vuex

vuex配置

这里直接跳过安装之类的,百度一大堆,我直接上代码

// store index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 初始化时用sessionStore.getItem('token'),这样子刷新页面就无需重新登录
const state = {
  user: window.sessionStorage.getItem('user'),
  token: window.sessionStorage.getItem('token')
}
const mutations = {
  //将token保存到sessionStorage里,token表示登陆状态
  SET_TOKEN: (state, data) => {
    state.token = data
    window.sessionStorage.setItem('token', data) 
  },
  //获取用户名
  GET_USER: (state, data) => {
    // 把用户名存起来
    state.user = data
    window.sessionStorage.setItem('user', data)
  },
  //登出
  LOGOUT: (state) => {
    // 登出的时候要清除token
    state.token = null
    state.user = null
    window.sessionStorage.removeItem('token')
    window.sessionStorage.removeItem('user')
  }
}

const actions = {
}
export default new Vuex.Store({
  state,
  mutations,
  actions
})

1、我在这里是将登录状态token,和用户名user存在sessionStorage里,以便组件使用,如果token为true则表示用户已经登陆sessionStorage和token这两个东西很简单用法自行百度
2、不要忘了在main.js引入store,vue实例中也要加入store
main.js


import store from './store/index'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

vue-route配置

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login'
import Activity from '../components/Activity'
import Index from '../components/Index'
import store from '../store/index'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: '/',
      component: Index
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/activity',
      name: 'activity',
      component: Activity,
      meta: {
        requireAuth: true // 添加该字段,表示进入这个路由是需要登录的
      }
    }
  ]
})

// 注册全局钩子用来拦截导航
router.beforeEach((to, from, next) => {
  const token = store.state.token
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if (token) { // 通过vuex state获取当前的token是否存在
      next()
    } else {
      console.log('该页面需要登陆')
      next({
        path: '/login'
        // query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
      })
    }
  } else {
    next()
  }
})

export default router

这里我用到router.beforeEach来实现拦截登陆,
1、在需要验证的路由的meta里加入我们自己的requireAuth
2、router.beforeEach里通过requireAuth验证该组件是否需要登陆
3、验证token如果为flase就表示未登陆跳转到登录页

axios发送请求

submitLogin () {
  this.$refs.loginForm.validate(valid => {
    if (valid) {
      axios.post('/login', {
        user: this.loginForm.user,
        pass: this.loginForm.pass
      })
        .then((response) => {
          if (response.status === 200) {
            this.$store.commit('SET_TOKEN', response.data.token)
            this.$store.commit('GET_USER', response.data.user)
            this.$message({
              message: '登陆成功',
              type: 'success'
            })
            this.$router.push({name: 'activity'})
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    } else {
      console.log('error submit!!')
      return false
    }
  })
},

后台我没写,是用mock.js拦截ajax请求
因为我用的是element-ui所以上面代码有一些直接无视,看核心的就行
1、在数据返回成功后用this.$store.commit来更新vuex里的数据
2、登陆成功后跳转this.$router.push()跳转页面,
这里注意,如果你在前面导航拦截的钩子用了query: {redirect: to.fullPath}的话,
这里就 用 this.$router.push(this.$route.query.redirect);这样页面就能跳到
你跳到登陆页面前要去的那个路由了

那个TOKEN我这里也没有使用,就是在页面请求的时候带上这个TOKEN,与后端核对。

查看原文

赞 39 收藏 37 评论 6

3分度 收藏了文章 · 2019-05-10

Vue登录注册,并保持登录状态

关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法。

项目中有一些路由是需要登录才可以进入的,比如首页,个人中心等等
有一些路由是不需要登录就可以进入,比如登录页,注册页,忘记密码等等
那如何判断路由是否需要登录呢?就要在路由JS里面做文章

在router.js中添加meta区分

比如登录注册页面,不需要登录即可进入,那么我们把meta中的isLogin标志设置为false

{
  //登录
  path: '/login',
  component: login,
  meta: {
    isLogin: false
  }
},
{
  //注册
  path: '/register',
  component: register,
  meta: {
    isLogin: false
  }
},

而在首页我们需要登录才能进入,那么我们把meta中的isLogin标志设置为true

{
  //首页
  path: '/home',
  component: home,
  meta: {
    isLogin: true
  },
}

这样我们就为进入各个路由是否需要登录做了区分。

接下来我们在login.vue中修改登录后状态

我们使用axios向后台发起登录请求

this.$axios.post("/xxx/login", {user:name,password:pwd})
    .then(data => {
        //登录失败,先不讨论
        if (data.data.status != 200) {
          //iViewUi的友好提示
          this.$Message.error(data.data.message);
        //登录成功
        } else {
          //设置Vuex登录标志为true,默认userLogin为false
          this.$store.dispatch("userLogin", true);
          //Vuex在用户刷新的时候userLogin会回到默认值false,所以我们需要用到HTML5储存
          //我们设置一个名为Flag,值为isLogin的字段,作用是如果Flag有值且为isLogin的时候,证明用户已经登录了。
          localStorage.setItem("Flag", "isLogin");
          //iViewUi的友好提示
          this.$Message.success(data.data.message);
          //登录成功后跳转到指定页面
          this.$router.push("/home");
        }
 });

Vuex里面我是这样写的(如果项目不需要Vuex,那么直接使用HTML5储存就可以了):

export const store = new Vuex.Store({
  // 设置属性
  state: {
    isLogin: false,
  },

  // 获取属性的状态
  getters: {
    //获取登录状态
    isLogin: state => state.isLogin,
  },

  // 设置属性状态
  mutations: {
    //保存登录状态
    userStatus(state, flag) {
      state.isLogin = flag
    },
  },

  // 应用mutations
  actions: {
    //获取登录状态
    userLogin({commit}, flag) {
      commit("userStatus", flag)
    },
  }
})

重点来了~,在mian.js里

router.beforeEach((to, from, next) => {

  //获取用户登录成功后储存的登录标志
  let getFlag = localStorage.getItem("Flag");

  //如果登录标志存在且为isLogin,即用户已登录
  if(getFlag === "isLogin"){

    //设置vuex登录状态为已登录
    store.state.isLogin = true
    next()

    //如果已登录,还想想进入登录注册界面,则定向回首页
    if (!to.meta.isLogin) {
       //iViewUi友好提示
      iView.Message.error('请先退出登录')
      next({
        path: '/home'
      })
    }
  
  //如果登录标志不存在,即未登录
  }else{

    //用户想进入需要登录的页面,则定向回登录界面
    if(to.meta.isLogin){
      next({
        path: '/login',
      })
      //iViewUi友好提示
      iView.Message.info('请先登录')
    //用户进入无需登录的界面,则跳转继续
    }else{
      next()
    }

  }

});

router.afterEach(route => {
  window.scroll(0, 0);
});

这样就已经完成了Vue的登录注册,当用户关闭浏览器或者第二天再次进入网站,用户依旧可以保持着登录的状态直到用户手动退出登录。

Tips:用户退出只需要localStorage.removeItem("Flag")即可

如果有什么疑问欢迎留言,有错误或者有更简单的方法欢迎大力指出~~

查看原文

3分度 提出了问题 · 2019-05-09

vue项目axios 能读取数据 获取不到 session

vue项目axios 能读取数据 获取不到session

已经根据网上的各种答案测试过了 都不行 实在是整不明白什么原因希望打大神们指教指教 下面的是前端后端的 session 获取的操作

图片描述图片描述图片描述图片描述

关注 3 回答 2

3分度 提出了问题 · 2019-05-09

vue项目axios 能读取数据 获取不到 session

vue项目axios 能读取数据 获取不到session

已经根据网上的各种答案测试过了 都不行 实在是整不明白什么原因希望打大神们指教指教 下面的是前端后端的 session 获取的操作

图片描述图片描述图片描述图片描述

关注 3 回答 2

3分度 关注了问题 · 2019-05-09

vue项目axios 能读取数据 获取不到 session

vue项目axios 能读取数据 获取不到session

已经根据网上的各种答案测试过了 都不行 实在是整不明白什么原因希望打大神们指教指教 下面的是前端后端的 session 获取的操作

图片描述图片描述图片描述图片描述

关注 3 回答 2

3分度 收藏了文章 · 2019-02-22

详解vue生命周期

首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉:

clipboard.png

可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数,然后我们再一一详解:

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

先来一波代码,各位复制在浏览器中运行,打开console查看就行了:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script data-original="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue的生命周期'
    },
    beforeCreate: function() {
      console.group('------beforeCreate创建前状态------');
      console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
      console.log("%c%s", "color:red","message: " + this.message) 
    },
    created: function() {
      console.group('------created创建完毕状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    beforeMount: function() {
      console.group('------beforeMount挂载前状态------');
      console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
    },
    mounted: function() {
      console.group('------mounted 挂载结束状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
      console.log(this.$el);    
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);   
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    updated: function () {
      console.group('updated 更新完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el); 
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);    
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);  
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message)
    }
  })
</script>
</html>

运行后打开console可以看到打印出来内容如下:

clipboard.png

可以看到一个vue实例在创建过程中调用的几个生命周期钩子。

1. 在beforeCreate和created钩子函数之间的生命周期

在这个生命周期之间,进行初始化事件,进行数据的观测,可以看到在created的时候数据已经和data属性进行绑定(放在data中的属性当值发生改变的同时,视图也会改变)。
注意看下:此时还是没有el选项

2. created钩子函数和beforeMount间的生命周期

clipboard.png

在这一阶段发生的事情还是比较多的。

首先会判断对象是否有el选项如果有的话就继续向下编译,如果没有el选项,则停止编译,也就意味着停止了生命周期,直到在该vue实例上调用vm.$mount(el)。此时注释掉代码中:

el: '#app',

然后运行可以看到到created的时候就停止了:

clipboard.png

如果我们在后面继续调用vm.$mount(el),可以发现代码继续向下执行了

vm.$mount(el) //这个el参数就是挂在的dom接点

clipboard.png

然后,我们往下看,template参数选项的有无对生命周期的影响。
(1).如果vue实例对象中有template参数选项,则将其作为模板编译成render函数。
(2).如果没有template选项,则将外部HTML作为模板编译。
(3).可以看到template中的模板优先级要高于outer HTML的优先级。
修改代码如下, 在HTML结构中增加了一串html,在vue对象中增加了template选项

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script data-original="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--html中修改的-->
    <h1>{{message + '这是在outer HTML中的'}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    template: "<h1>{{message +'这是在template中的'}}</h1>", //在vue配置项中修改的
    data: {
      message: 'Vue的生命周期'
    }
</script>
</html>

执行后的结果可以看到在页面中显示的是:

clipboard.png

那么将vue对象中template的选项注释掉后打印如下信息:

clipboard.png

这下就可以想想什么el的判断要在template之前了~是因为vue需要通过el找到对应的outer template。

在vue对象中还有一个render函数,它是以createElement作为参数,然后做渲染操作,而且我们可以直接嵌入JSX.

new Vue({
    el: '#app',
    render: function(createElement) {
        return createElement('h1', 'this is createElement')
    }
})

可以看到页面中渲染的是:

clipboard.png

所以综合排名优先级:
render函数选项 > template选项 > outer HTML.

3. beforeMount和mounted 钩子函数间的生命周期

clipboard.png

可以看到此时是给vue实例对象添加$el成员,并且替换掉挂在的DOM元素。因为在之前console中打印的结果可以看到beforeMount之前el上还是undefined。

4. mounted

注意看下面截图:

clipboard.png

在mounted之前h1中还是通过{{message}}进行占位的,因为此时还有挂在到页面上,还是JavaScript中的虚拟DOM形式存在的。在mounted之后可以看到h1中的内容发生了变化。

5. beforeUpdate钩子函数和updated钩子函数间的生命周期

clipboard.png

当vue发现data中的数据发生了改变,会触发对应组件的重新渲染,先后调用beforeUpdateupdated钩子函数。我们在console中输入:

vm.message = '触发组件更新'

发现触发了组件的更新:

clipboard.png

6.beforeDestroy和destroyed钩子函数间的生命周期

clipboard.png

beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

本文是个人对vue的生命周期的理解,有什么不对的地方还请大牛多多指点~

查看原文

3分度 收藏了文章 · 2019-01-23

如何运行一个Vue项目

一开始很多刚入手vue.js的人,会扒GitHub上的开源项目,但是发现不知如何运行GitHub上的开源项目,很尴尬。通过查阅网上教程,成功搭建好项目环境,同时对前段工程化有了朦朦胧胧的认知,因此将环境搭建过程分享给大家。

首先,列出来我们需要的东西:

node.js环境(npm包管理器)
vue-cli 脚手架构建工具
cnpm  npm的淘宝镜像

安装node.js

从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。
安装完成之后,打开命令行工具,输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。

clipboard.png

npm包管理器,是集成在node中的,所以,直接输入 npm -v就会如下图所示,显示出npm的版本信息。

clipboard.png

OK!node环境已经安装完成,npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm。

安装cnpm

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待,安装完成如下图。

clipboard.png

完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网

安装vue-cli脚手架构建工具

在命令行中运行命令 cnpm install -g vue-cli ,然后等待安装完成。(注意,这里使用cnpm来替代npm,不然速度超级慢,会导致卡在那)
通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。

用vue-cli构建项目

要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。在这里,我选择桌面来存放新建的项目,则我们需要先把目录cd到桌面,如下图。

clipboard.png

在桌面目录下,在命令行中运行命令 vue init webpack firstVue 。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在桌面生成该文件夹),如下图。

clipboard.png

运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好。

clipboard.png

打开firstVue文件夹,项目文件如下所示。

clipboard.png

这就是整个项目的目录结构,其中,我们主要在src目录中做修改。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装,如下图。

clipboard.png

安装项目所需的依赖

要安装依赖包,首先cd到项目文件夹(firstVue文件夹),然后运行命令 cnpm install ,等待安装。

clipboard.png

安装完成之后,会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源。

clipboard.png

安装完依赖包之后,就可以运行整个项目了。

运行项目

在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

clipboard.png

这里简单介绍下 npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。

clipboard.png

如果看到这个页面,说明项目运行成功了。

查看原文

3分度 赞了问题 · 2018-09-20

解决jQuery中获取元素到页面可视区顶端距离有什么方法

比如原生的offsetTop,还有HTML5的getBoundClientRect对象中的top

找了下jQuery中好像只有obj.offset().top,但它是相对于document顶端的距离

关注 5 回答 2

3分度 赞了回答 · 2018-09-20

解决jQuery中获取元素到页面可视区顶端距离有什么方法

可以根据offsetTop减去滚动的多少来算出来

obj.offsetTop - document.body.scrollTop

obj是个DOM对象

关注 5 回答 2

认证与成就

  • 获得 1 次点赞
  • 获得 4 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 4 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-02-22
个人主页被 127 人浏览