vue和laravel实训,实现前端两个页面,后台两个页面,需要写出登录,注册页面,要实现对数据库的增删改查,用代码实现,并展示完整代码
时间: 2023-08-17 07:05:23 浏览: 60
好的,下面是前端和后台页面的代码实现,包括登录、注册页面和对数据库的增删改查操作。
## 前端页面
### 登录页面
```html
<!-- login.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<h2>登录</h2>
<form>
<label>用户名:</label>
<input type="text" name="username"><br>
<label>密码:</label>
<input type="password" name="password"><br>
<button type="submit">登录</button>
</form>
</body>
</html>
```
### 注册页面
```html
<!-- register.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<h2>注册</h2>
<form>
<label>用户名:</label>
<input type="text" name="username"><br>
<label>密码:</label>
<input type="password" name="password"><br>
<label>确认密码:</label>
<input type="password" name="confirm_password"><br>
<button type="submit">注册</button>
</form>
</body>
</html>
```
## 后台页面
### 用户列表页
```html
<!-- user_list.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
</head>
<body>
<h2>用户列表</h2>
<table>
<thead>
<tr>
<th>用户名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>user1</td>
<td>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>user2</td>
<td>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr>
<!-- ... -->
</tbody>
</table>
</body>
</html>
```
### 用户编辑页
```html
<!-- user_edit.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编辑用户</title>
</head>
<body>
<h2>编辑用户</h2>
<form>
<label>用户名:</label>
<input type="text" name="username" value="user1"><br>
<label>密码:</label>
<input type="password" name="password"><br>
<button type="submit">保存</button>
</form>
</body>
</html>
```
## 前端和后台代码实现
### 前端代码
```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<h2>欢迎使用</h2>
<a href="login.html">登录</a>
<a href="register.html">注册</a>
</body>
</html>
```
### 后台代码
```php
<!-- routes/web.php -->
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('user_list');
});
Route::get('/user/edit/{id}', function ($id) {
return view('user_edit');
});
Route::post('/user/save/{id}', function ($id) {
// 保存用户信息
});
Route::get('/user/delete/{id}', function ($id) {
// 删除用户信息
});
```
```php
<!-- app/Http/Controllers/UserController.php -->
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UserController extends Controller
{
public function register(Request $request)
{
// 注册用户
}
public function login(Request $request)
{
// 登录用户
}
public function userList()
{
// 获取用户列表
$users = [
['id' => 1, 'username' => 'user1'],
['id' => 2, 'username' => 'user2'],
// ...
];
return view('user_list', compact('users'));
}
public function userEdit($id)
{
// 获取用户信息
$user = ['id' => 1, 'username' => 'user1'];
return view('user_edit', compact('user'));
}
public function userSave(Request $request, $id)
{
// 保存用户信息
}
public function userDelete($id)
{
// 删除用户信息
}
}
```
```html
<!-- user_list.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
</head>
<body>
<h2>用户列表</h2>
<table>
<thead>
<tr>
<th>用户名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
@foreach($users as $user)
<tr>
<td>{{ $user['username'] }}</td>
<td>
<a href="/user/edit/{{ $user['id'] }}">编辑</a>
<a href="/user/delete/{{ $user['id'] }}">删除</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</body>
</html>
```
```html
<!-- user_edit.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编辑用户</title>
</head>
<body>
<h2>编辑用户</h2>
<form method="post" action="/user/save/{{ $user['id'] }}">
@csrf
<label>用户名:</label>
<input type="text" name="username" value="{{ $user['username'] }}"><br>
<label>密码:</label>
<input type="password" name="password"><br>
<button type="submit">保存</button>
</form>
</body>
</html>
```
以上就是实现前端两个页面,后台两个页面,需要写出登录,注册页面,要实现对数据库的增删改查的完整代码。