## **制作用户登录窗口** 在login.vue页面中，增加用户登录dialog ``` <el-dialog title="登录" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :center="true" :visible.sync="dialogFormVisible"> <el-form> <el-form-item> <el-input v-model="userinfo.username" placeholder="用户名"></el-input> </el-form-item> <el-form-item> <el-input type="password" v-model="userinfo.password" placeholder="密码"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button style="width:80%" type="primary" @click="doLogin()">确 定</el-button> </div> </el-dialog> ``` ## **完成前端用户登录逻辑** 如果没有获取到用户信息，弹出登录框，提示用户登录，用户点击确定，提交服务器校验用户名和密码是否正确，如果正确，则将用户保存到localStorage中，如果登录失败，则提示用户失败原因 ``` import tools from '../utils/tools.js'; export default { name: 'login', data(){ return{ dialogFormVisible:false, userinfo:{} } }, //页面刚加载的时候，判断是否需要登录 beforeMount() { //判断用户有没有登录 var userinfo=tools.storage.get('userinfo') if(userinfo){ this.dialogFormVisible=false; }else{ this.dialogFormVisible=true; } }, methods: { doLogin () { if(this.userinfo.username && this.userinfo.password){ this.$http.post(tools.config.apiUrl+'User/login', { username: this.userinfo.username, password: this.userinfo.password }) .then((response)=>{ response=response.data; if(response.success){ this.$message({ message: response.message, type: 'success' }); //保存用户信息 tools.storage.set('userinfo',response.result); this.dialogFormVisible=false; }else{ this.$message({ message: response.message, type: 'warning' }); } }) .catch(function (error) { console.log(error); }); }else{ this.$message({ message: '用户名密码不能为空', type: 'warning' }); } } } } ``` ## **完成后端用户登录逻辑** ``` <?php namespace app\api\controller; use think\Controller; use think\Db; class User extends Controller { public function _initialize() { header('Content-Type: text/html;charset=utf-8'); header('Access-Control-Allow-Origin:*'); // *代表允许任何网址请求 header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); // 允许请求的类型 header('Access-Control-Allow-Credentials: true'); // 设置是否允许发送 cookies header('Access-Control-Allow-Headers: Content-Type,Content-Length,Accept-Encoding,X-Requested-with, Origin'); // 设置允许自定义请求头的字段 } public function login() { $params=input('post.'); //检验用户提交的数据是否合法 if(!isset($params['username']) || empty($params['username'])){ exit(json_encode(['success' => false, 'result' => [], 'message' => '用户名不能为空' ])); } if(!isset($params['password']) || empty($params['password'])){ exit(json_encode(['success' => false, 'result' => [], 'message' => '密码不能为空' ])); } $condition = array(); $condition['username'] = $params['username']; $condition['password'] = md5($params['password']); //查询用户信息 $user = Db::name('user')->field('id,username,realname,salt')->where($condition)->find(); //查询不到，返回登录失败 if(empty($user)){ exit(json_encode(['success' => false, 'result' => [], 'message' => '用户名或密码不正确，登录失败' ])); } //正确返回用户信息 exit(json_encode(['success' => true, 'result' => $user, 'message' => '登录成功' ])); } } ``` ## **运行效果如下** **用户登录**  **登录失败**  **登录成功**  **请求正确时返回的数据**