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