首先记录一下命令。

这是一个睿智新手的笔记。

p.s.这是配置好环境以后的命令。

-----------------------------------------------

$ npm install -global vue-cli    //手脚架先装好

$ vue init webpack my-project    //创建个存放项目的目录

$ cd my-project    //进入此目录

$ npm install

$ npm run dev    //运行项目

//安装插件

$ npm install iview --save

$npm install vuex --save

...

具体步骤参考 https://www.jianshu.com/p/f82d55df7e54

这篇博客很详尽,感恩作者,啵啵啵啵

基本要用的东西安装配置完后,main.js里是这样的:

可以看到我们的接口调用使用axios,这里需要配置接口的域名(前缀),可以方便接口域名的更改:config下的dev.env.js

然后在scr文件夹下新建api文件夹,里面新建api.js,配置url_root:

此时main.js里的第17行就可以理解了:

ps:后端也需要处理请求头以及Access-Control-Allow-Credentials为true,保证跨域资源共享

再ps:关于axios为我们做了什么,可以参看大佬的github分享的:https://github.com/leer0911/myXHR/blob/master/doc/README.md#typescript-%E9%87%8D%E6%9E%84-axios-%E5%85%A8%E6%94%BB%E7%95%A5

而我们在调用接口的时候就可以这么写了: ↓ 下面是login.vue:

 this.$refs["formInline"].validate(valid => {
if (valid) {
var data = new FormData();
data.append('username',formInline.user)
data.append('password',formInline.password)
this.$http({
method: "post",
url: this.$url_root + "/user/login",
data: data
}).then((response) => {
if(response.data.succeed){
this.$Message.success("登陆成功!");
this.user=''
this.password= ''
sessionStorage.setItem("user", formInline.user);
sessionStorage.setItem("password", formInline.password);
this.$router.push({path:'/home'});
this.$store.state.myheadright = true
}else{
this.$Message.error(response.data.message);
}
});
} else {
this.$Message.error("请输入正确的用户名和密码!");
this.user = "";
this.password = "";
this.verification_code = "";
}
});

其实一般来说登陆成功后台应该返回一个AccessToken,非常方便,但是由于这个项目是个非常粗糙的项目,所以不要指望后台来适应咱了,我忍。

这里还涉及到了登陆与否的某些通用组建的变化,比如在登录页面没有侧边栏,在登陆之后头部要出现“注销”按钮,这里的实现使用了两种方式。

侧边栏的隐藏和显示使用了v-if + watch。因为我们统一在APP.vue进行显示,所以在这里可以看到如何实现:

首先APP.vue要引一下我们写好的组件:

这里是我们的页面DOM:(可以看到class为layout的div使用了v-if进行控制)

data里定义path,watch进行监控:

此时就可以看到区别了:(页面毫无ui设计,蓝瘦)

 然后是头部“注销”的显示与隐藏,使用了vuex(至今我也只学会了这个),可以看到登陆的代码中有这一行:

这个是我们在src中同样新建的store文件夹下的store.js配置的:

而里面的myheadright就是我们在header组件中写好的:

这里是写在注销方法里的控制:

 

接下来关于登陆与否的验证,还有一条——当我们没有登陆却进了其他页面呢?此时需要立刻判断是否登录,并作出页面跳转,这里我们后台没有返回什么东西给我,我只好把账号密码存在本地,尴尬:

当然上面这段是抄的,忘记是哪位大神的博客了,很难过,感谢他,啾咪!

VUE + vue-cli + webpack 创建新项目的更多相关文章

  1. VUE + vue-cli + webpack 创建新项目(2)

    上一篇其实没写完. 好吧这一篇其实也没啥. 就补充一些上一篇没写完的.(随时害怕笔记本丢失的人) 上一篇写完了登录验证的跳转,这一片首先补充一下接口(?). 在使用axios的过程中,我们家后台表示你 ...

  2. 用Kotlin开发Android应用(II):创建新项目

    这是关于Kotlin的第二篇.各位高手发现问题,请继续“拍砖”. 原文标题:Kotlin for Android(II): Create a new project 原文链接:http://anton ...

  3. cocos2d-x3.2创建新项目失败的一种可能性(cygwin自带的python2.6被抢先执行)

    之前一直使用cocos2d-x2.2写游戏,写了几个游戏后,想尝试下3.x版本的新功能,就下载了cocos2d-x3.2版本. 参照官方文档的说法,cocos2d-x3.x版本需要python2.7环 ...

  4. AndroidStudio创建新项目报错

    创建新项目自动执行时报错: Failed to import new Gradle project: failed to find Build Tools revision 17.0.0 Consul ...

  5. cocos2dx 3.3创建新项目 和 VS2012解决方案加载失败问题

     首先创建新项目,步骤如下: 1.进入cocos2d-x-3.3\tools\cocos2d-console\bin目录,按住shift+鼠标右键 2.输入 cocos new 项目名 –p 包名 – ...

  6. What?VS2019创建新项目居然没有.NET Core3.0的模板?Bug?

    今天是个值得欢喜的日子,因为VS2019在今天正式发布了.作为微软粉,我已经用了一段时间的VS2019 RC版本了.但是,今天有很多小伙伴在我的<ASP.NET Core 3.0 上的gRPC服 ...

  7. android studio: 一个Android studio 3.3.2 无法创建新项目的问题

    记录一个AS无法创建新项目的问题. 今天想写一个测试Demo,点击上面的“Start a new Android Studio Project” ,填写完包名和项目路径后,点“Finish”, AS无 ...

  8. Android Studio开发第二篇创建新项目

    创建新项目很简单,File-New-New Project,这个没什么好说的跟Eclipse都差不都. 第二步SDK选择,有手机平板还有Wear,TV,汽车Auto,谷歌眼镜等几个种平台,这里就先选择 ...

  9. git 创建新项目,下载工程,合并和更新工程简单应用记录

    以前使用SVN很顺手,现在公司使用git来管理代码,因此学习git的基本使用. 一.首先介绍下SVN和git的简单比较: SVN是使用得最多的版本控制管理工具. 1.是一个集中式的版本管理工具.所有的 ...

随机推荐

  1. Redis入门到高可用(二十)——Redis Cluster

    一.呼唤集群 二.数据分布概论      三.哈希分布 1.节点取余 2.一致性哈希 添加一个node5节点时,只影响n1和n2之间的数据   3.虚拟槽分区 四.基本架构 五.redis clust ...

  2. AppUtil

    import java.io.File;import java.util.ArrayList;import java.util.LinkedHashMap;import java.util.List; ...

  3. Docker:Docker machine(5)

    Docker machine Docker Machine的安全集成在Docker Toolbox中,是用户在Windows环境下使用docker并管理VirtualBox的一个终端: docker- ...

  4. Android adt-bundle 开发环境的搭建_Linuxs

    本文完全是拷贝的: https://www.jb51.net/article/87957.htm  的文章, 有需要请看原文, 拷贝仅用于学习记录. 本文与<利用adt-bundle轻松搭建An ...

  5. linux的查找命令 find whereis locate

    Linux 有三个查找文件的命令:find, whereis, locate 其中find 不常用,whereis与locate经常使用,因为find命令速度较慢,因为whereis与locate是利 ...

  6. [PHP] swoole在daemonize模式下,chdir失效问题

    swoole version: 1.9.6 其实跟swoole的版本无关,因为原代码体系,fpm模式下,在启动的时候,是使用 chdir 函数改变了当前目录的,而其它代码在做类的自动加载的时候,都是写 ...

  7. NOIP2015跳石头

    题目描述 Description 一年一度的“跳石头”比赛又要开始了! 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间,有N ...

  8. ASP.NET MVC案例教程(五)

    ASP.NET MVC案例教程(四) 前言 通过前几篇文章,我们已经能比较自如的使用ASP.NET MVC来呈现页面和数据了.但是,有一个大问题没有解决:如何处理表单数据.例如,我们将要实现的公告发布 ...

  9. https://scrapingclub.com/exercise/detail_sign/

    def parse(self, response): # pattern1 = re.compile('token=(.*?);') # token = pattern1.findall(respon ...

  10. 配置firewalld端口转发

    题:在系统 system1 设定端口转发,要求: 1.在172.24.8.0/24网络中的系统,访问system1的本地端口 5423 将被转发到 80 2.此设置必须永久有效 答: # 配置转发端口 ...