如何利用laragon框架制作一个简单的应用?

如何利用laragon框架制作一个简单的应用?

一、搭建环境

1. 安装Laragon

1.1 打开安装包用的语言

选择自己习惯用的语言
在这里插入图片描述

1.2 选择安装地址

在这里插入图片描述

1.3 选择Next,开始install

在这里插入图片描述

1.4 安装完成

在这里插入图片描述

2. 安装PhpStorm(详细步骤请上网查询)

2.1 打开后可能会出现以下界面

在这里插入图片描述

2.2 激活码链接

激活码链接
获取密码:lookdiv

2.3 安装完成

在这里插入图片描述

二、利用Laragon创建工程

1. 打开Laragon

1.1 点击start all,出现以下界面

在这里插入图片描述

1.2 给app取名

点击Quik APP,选择Laravel
在这里插入图片描述

1.3 等待下载完成

在这里插入图片描述

2. 打开PHP

2.1 在todos-resource-todos文件夹创建php file,index.blade.php

在这里插入图片描述
代码如下:

// A code block
var foo = 'bar';
@extends('layouts.app')

@section('title', 'TODO LIST')
@section('content')
    <h1 class="text-center my-5">Todo Page</h1>
    <div class="row justify justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    Todo List
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        @foreach($todos ?? '' as $todo)
                            <li class="list-group-item">
                                    <span @if($todo->is_completed) style="text-decoration: line-through"@endif>
                                        {{$todo->name}}
                                    </span>
                                {{-- {{$todo->name}}
                                 @if($todo->is_completed)
                                     <span class="badge badge-pill badge-success">已完成</span>
                                 @else
                                     <span class="badge badge-pill badge-secondary">未完成</span>
                                 @endif  --}}

                                <a class="btn btn-primary float-right" href="/todos/{{$todo->id}}">View</a>

                                <form action="/todos/{{$todo->id}}" method="post"
                                      class="d-inline-block float-right mr-2">
                                    @method('delete')
                                    @csrf
                                    <button type="submit" class="btn btn-danger">Delete</button>
                                </form>

                                @if(!$todo->is_completed)
                                    <form action="/todos/{{$todo->id}}/completed" method="post"
                                          class="d-inline-block float-right mr-2">
                                        @method('patch')
                                        @csrf
                                        <button type="submit" class="btn btn-warning">Complete</button>
                                    </form>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>

        </div>
    </div>
@endsection

2.2 在todos文件夹下创建create.blade.php

在这里插入图片描述
代码如下:

// A code block
var foo = 'bar';
@extends('layouts.app')

@section('title', 'TODO CREATE')

@section('content')
    <h1 class="text-center my-5">CREATE A NEW TODO</h1>
    <div class="row justify justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    New
                </div>
                <div class="card-body">
                    <form action="/todos" method="post">
                        @csrf
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" name="name" id="name" class="form-control
                                    @error('name') is-invalid @enderror">
                            @error('name')
                            <div class="invalid-feedback">
                                {{$message}}
                            </div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea name="description" id="description" rows="3" class="form-control
                                      @error('description') is-invalid @enderror"></textarea>
                            @error('description')
                            <div class="invalid-feedback">
                                {{$message}}
                            </div>
                            @enderror
                        </div>
                        <button type="submit" class="btn btn-primary float-right">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection```

我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:
 1. **全新的界面设计** ,将会带来全新的写作体验;
 2. 在创作中心设置你喜爱的代码高亮样式,Markdown **将代码片显示选择的高亮样式** 进行展示;
 3. 增加了 **图片拖拽** 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;
 4. 全新的 **KaTeX数学公式** 语法;
 5. 增加了支持**甘特图的mermaid语法[^1]** 功能;
 6. 增加了 **多屏幕编辑** Markdown文章功能;
 7. 增加了 **焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置** 等功能,功能按钮位于编辑区域与预览区域中间;
 8. 增加了 **检查列表** 功能。
 [^1]: [mermaid语法说明](https://mermaidjs.github.io/)

## 功能快捷键

撤销:<kbd>Ctrl/Command</kbd> + <kbd>Z</kbd>
重做:<kbd>Ctrl/Command</kbd> + <kbd>Y</kbd>
加粗:<kbd>Ctrl/Command</kbd> + <kbd>B</kbd>
斜体:<kbd>Ctrl/Command</kbd> + <kbd>I</kbd>
标题:<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd>
无序列表:<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd>
有序列表:<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd>
检查列表:<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>
插入代码:<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd>
插入链接:<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>
插入图片:<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>G</kbd>
查找:<kbd>Ctrl/Command</kbd> + <kbd>F</kbd>
替换:<kbd>Ctrl/Command</kbd> + <kbd>G</kbd>

## 合理的创建标题,有助于目录的生成

直接输入1<kbd>#</kbd>,并按下<kbd>space</kbd>后,将生成1级标题。
输入2<kbd>#</kbd>,并按下<kbd>space</kbd>后,将生成2级标题。
以此类推,我们支持6级标题。有助于使用`TOC`语法后生成一个完美的目录。

## 如何改变文本的样式

*强调文本* _强调文本_

**加粗文本** __加粗文本__

==标记文本==

~~删除文本~~

> 引用文本

H~2~O is是液体。

2^10^ 运算结果是 1024.

## 插入链接与图片

链接: [link](https://www.csdn.net/).

图片: ![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw)

带尺寸的图片: ![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw =30x30)

居中的图片: ![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw#pic_center)

居中并且带尺寸的图片: ![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw#pic_center =30x30)

当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。

## 如何插入一段漂亮的代码片

去[博客设置](https://mp.csdn.net/console/configBlog)页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 `代码片`.
```javascript
// An highlighted block
var foo = 'bar';

2.3 在todos文件夹下创建show.blade.php

在这里插入图片描述
代码如下:

// A code block
var foo = 'bar';
@extends('layouts.app')

@section('title', 'TODO SHOW')

@section('content')
    <h1 class="text-center my-5">{{$todo->name}}</h1>
    <div class="row justify justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header font-weight-bold d-flex align-items-center justify-content-between">
                    Detail
                    @if($todo->is_completed)
                        <span class="badge badge-pill badge-success float-right">已完成</span>
                    @else
                        <span class="badge badge-pill badge-danger float-right">未完成</span>
                    @endif
                </div>
                <div class="card-body">
                    {{$todo->description}}
                </div>
                <div class="card-footer">
                    <a href="/todos/{{$todo->id}}/edit" class="btn btn-block btn-outline-success">Edit</a>
                </div>
            </div>
        </div>
    </div>
@endsection

2.4 在todos文件夹下创建编辑页edit.blade.php

在这里插入图片描述
代码如下:

// A code block
var foo = 'bar';
// @extends('layouts.app')

@section('title', 'TODO EDIT')

@section('content')
    <h1 class="text-center my-5">EDIT TODO</h1>
    <div class="row justify justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    EDIT
                </div>
                <div class="card-body">
                    <form action="/todos/{{$todo->id}}" method="post">
                        @csrf
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" name="name" id="name" value="{{$todo->name}}"
                                   class="form-control @error('name') is-invalid @enderror">
                            @error('name')
                            <div class="invalid-feedback">
                                {{$message}}
                            </div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea name="description" id="description" rows="3" class="form-control
                                      @error('description') is-invalid @enderror">
                                        {{$todo->description}}</textarea>
                            @error('description')
                            <div class="invalid-feedback">
                                {{$message}}
                            </div>
                            @enderror
                        </div>
                        <button type="submit" class="btn btn-primary float-right">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

2.5 在resources/routes/web.php中添加路由

代码如下:

// A code block
var foo = 'bar';
1
2
Route::get('/', function () {
    return view('welcome');
});
//注册新的路由
//Route::get('/about','AboutController@index');//单个资源访问路由
Route::get('/todos','TodoController@index');

Route::get('/todos/create','TodoController@create');//创建页获取路由
Route::get('/todos/{todo}','TodoController@show');//单个资源访问路由
Route::get('/todos/{todo}/edit','TodoController@edit');//编辑页获取路由

Route::post('/todos','TodoController@store');//创建TODO提交的处理页路由
Route::post('/todos/{todo}','TodoController@update');//编辑TODO提交的处理页路由
Route::patch('/todos/{todo}','TodoController@update');//
Route::delete('/todos/{todo}','TodoController@destroy');//删除TODO的处理页路由

Route::patch('/todos/{todo}/completed','TodoController@complete');//完成TODO的处理页路由

2.6 在app/Http/Controller中建立TodoController控制器

代码如下:

// A code block
var foo = 'bar';
<?php
namespace App\Http\Controllers;

use App\Todo;
use Illuminate\Http\Request;

class TodoController extends Controller
{
    //
    public function index()
    {
        $todos = Todo::query()->orderByDesc('created_at')->get();
        //$todos = Todo::all();//取得模型中的所有数据
        //$items = Todo::all();
        //return view('todos.index');
        return view('todos.index')->with(['todos' => $todos]);//将数据送给视图
    }

    public function show(Todo $todo)
    {
        //dd($todoId);
        //$todo = Todo::findOrFail($todoId);
        //return $todo;
        return view('todos.show')->with(['todo'=> $todo]);
    }

    public function create()
    {
        return view('todos.create');
    }

    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required|min:3|max:20',
            'description' => 'required'
        ]);

        $name = $request->get('name');
        $description = $request->get('description');

        $todo = new Todo();
        $todo->name = $name;
        $todo->description = $description;
        $todo->save();

        $request->session()->flash('success-info', 'Create successful!');

        return redirect('/todos');
    }

    public function edit(Todo $todo)
    {
        //dd($todoId);
        //$todo = Todo::findOrFail($todoId);
        //return $todo;
        return view('todos.edit')->with(['todo'=> $todo]);
    }

    public function update(Todo $todo, Request $request)
    {
        $request->validate([
            'name' => 'required|min:3|max:50',
            'description' => 'required'
        ]);

        $name = $request->get('name');
        $description = $request->get('description');

        //$todo = Todo::findOrFail($todoId);
        $todo->name = $name;
        $todo->description = $description;
        $todo->save();

        $request->session()->flash('success-info', 'Update successful!');

        return redirect("/todos/{$todo->id}");
    }

    public function destroy(Todo $todo, Request $request)
    {
        //$todo = Todo::findOrFail($todoId);
        try{
            $todo->delete();
        }catch (\Exception $exception){
            dd($exception);
        }

        $request->session()->flash('success-info', 'Delete successful!');

        return redirect('/todos');
    }

    public function complete(Todo $todo)
    {
        $todo->is_completed = true;
        $todo->save();
        return redirect('/todos');
    }
}

三、项目效果

在这里插入图片描述

展开阅读全文
©️2020 CSDN 皮肤主题: 游动-白 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值