目的:使用vue+element-ui+leancloud建立一个可以登陆的系统
一、使用vue-cli3创建一个新的项目
vue create <app-name>
选择手动配置,选择Router
删去不需要的组件并建立api、views文件夹
二、安装element-ui
npm i element-ui -S
在main.js中写入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
三、安装leancloud
首先我们需要在leancloud控制台创建一个新的应用
接着在控制台>设置>应用Keys中找到你的服务器地址并复制,进入控制台>设置>域名绑定,将API访问地址和你的服务器地址进行绑定,否则会出现跨域请求失败问题。
在项目中安装leancloud,使用存储服务即可
npm install npm install leancloud-storage --save
在进行初始化前,进入控制台>设置>应用Keys获取你的App Id、App Key和服务器地址
在main.js中写入
import AV from 'leancloud-storage' ;
AV.init({
appId:"your-appid",
appKey:"your-appkey",
serverURL:"your-serverURL"
});
至此我们已经完成了所需工具的安装
四、构建用户登录系统
首先在leanCloud控制台>存储>用户页面为我们的管理系统添加新用户
接着在api文件夹下新建login.js,添加如下代码使我们可以完成登录/登出功能
在views文件夹下创建Home.vue和index.vue页面
接着配置路由
接着在index.vue页面(表单验证未展示),我们为其导入api文件夹下的login.js,并为我们的登录按钮添加一个@click事件
在Home页面同样导入api文件夹下的login.js,为我们的登出按钮添加一个@click事件
再添加一个登录验证,这时我们需要在Home页中引入AV,并用mounted钩子进行检测
至此我们的页面就构建完成了,调出终端运行npm run serve
向表单中添加我们在leancloud中添加好的用户及密码即可。