vue.js创建网站实例2

vue-admin-template和vue-element-admin是一个东西,前者是一个基础模板,后者是一个集成方案,可以使用前者作为你的网站模板,然后复制后者的代码,所以两个都可以克隆下来,参考使用,参考网址: https://panjiachen.github.io/vue-element-admin-site/zh/guide/

  1. 安装步骤
    克隆项目,在要部署的文件夹下运行下面的命令
git clone https://github.com/PanJiaChen/vue-admin-template.git
#和
git clone https://github.com/PanJiaChen/vue-element-admin.git

进入项目目录

cd vue-admin-template

安装依赖
建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

npm install --registry=https://registry.npm.taobao.org

本地开发 启动项目

npm run dev

2.下载好的模板是自带mock数据接口的,注释掉它,换成自己的接口
修改vue.config.js
注释掉

 before: require('./mock/mock-server.js')

在这段后面添加

 proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://localhost', //修改后台接口地址
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }

修改 .env.development

VUE_APP_BASE_API = ''

去掉单引号中的路径
注意:修改配置文件需重新run
修改src/api/user.js,换成自己的接口

export function login(data) {
  return request({
    // url: '/vue-admin-template/user/login',
    url: 'user/login.php',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    // url: '/vue-admin-template/user/info',
    url: 'user/info.php',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    // url: '/vue-admin-template/user/logout',
    url: 'user/logout.php',
    method: 'post'
  })
}

修改用户名验证方法,修改src/utils/validate.js
修改validUsername方法,判断不为空

export function validUsername(str) {
  // const valid_map = ['admin', 'editor']
  // return valid_map.indexOf(str.trim()) >= 0
  return /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/.test(str.trim())
}

可以注释掉默认用户名密码,测试阶段可保留,并设置成自己的,在 src/views/login/index.vue 中

loginForm: {
        //username: 'admin',
        //password: '111111'
      },

登录调用了两个接口,一个是login.php,一个是info.php,接口返回格式如下
login.php

{"code":20000,"data":{"token":"admin-token"}}

若要自定义返回code,修改src/utils/request.js
php代码,获取传递过来的用户名密码方法见下面的注释部分

 
header('Content-Type:application/json');
//设置编码
// $request_body = file_get_contents('php://input');
// $json=json_decode($request_body);
// echo($json->username);
$arr = array('code' => 20000, 'token' => 'admin');
//$arr = array('code' => 50008, 'message' =>  'Account and password are incorrect.');
echo(json_encode($arr));
?>

info.php

{"code":20000,"data":{"roles":["admin"],"introduction":"I am a super administrator","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif","name":"Super Admin"}}

php代码

 
header('Content-Type:application/json');
$request_body = file_get_contents('php://input');
$json=json_decode($request_body);
echo($json->token);
$arr = array('code' => 20000, 'data'=>array('roles' =>  array('admin'), 'introduction' => '我是一个管理员', 'avatar' => 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','name' => 'Super Admin'));
//$arr = array('code' => 50008, 'message' =>  'Account and password are incorrect.');
echo(json_encode($arr));
?>

token我是采用了php的加密类,自行百度吧,对uid、timestamp、两位随机数进行加密,中间以竖线分隔

$token=$aes->encrypt($uid."|".$timestamp."|".$randnum);

读取到token以后再解密,根据uid读取数据库,判断token是否一致,一致则返回数据

我在第一次使用vue-admin-template时,没有遇到这个问题,第二次再用时,遇到了“请求login.php成功,却不发送info.php的请求”的问题,错误原因:
注意login.php返回的json格式不正确,应该是data里写token,不能直接写token

登录部分的修改就基本完成了

  • vue.js创建网站实例1
  • vue.js创建网站实例2
  • vue.js创建网站实例3
  • vue.js创建网站实例4
  • vue.js创建网站实例5
  • vue.js创建网站实例6

你可能感兴趣的:(web前端)