


About how to write a blog using Vue-laravel to separate the front-end and back-end
This article mainly introduces the method of using Vue-laravel to separate the front-end and back-end to write a blog. It has certain reference value. Now I share it with you. Friends in need can refer to it
During this period of time, I learned Vue and wrote a small blog. I used Laravel for the backend interface. I encountered many problems in the process. I will summarize it here and attach a code link: (I haven’t bought the domain name yet, so you can just look at the code. OK)
https://github.com/rencong/bl...
https://github.com/rencong/bl...
1. Pagination
I know there are many well-written paging components on the Internet, but my original intention was to learn, not to be fast, so I wrote it myself. The problem I encountered was two-way binding between components .
I call the paginator component on the list page and pass the paging information to it. As a result, the properties of the paginator component props do not change.
The reason is that the value of props cannot be modified within the component, and the modified value will not be synchronized to the outer layer of the component.
Synchronize the modification of props outside the component:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
Here I only need to synchronize the modification of props outside the paginator. If you need to notify the outside of the paginator, please refer to how to implement two-way binding of component props in Vue2
2. Markdown Editor
I think segmentfault’s rich text editor is very nice, so I found a similar one, which is simpleMDE
Attached is the translated and more comprehensive configuration of simpleMDE
During the use process, an article that I found very helpful is the SimpleMDE editor to extract HTML and beautify the output
The only point to note is that when introducing fontawesome into vue, use the following code
1 2 3 |
|
You can use npm, bower or cdn introduction
1 |
|
1 |
|
1 2 |
|
I used it very smoothly in laravel, just like the steps mentioned on GitHub, but in vue, I couldn’t get the content in the rich text using v-model. Finally, I studied The result is that you need to manually obtain the content of the editor and assign it to a variable.
1 2 3 4 5 6 7 8 9 |
|
In addition, simplemde can also customize the toolbar. Interested students can check out his source code. I customized it after looking at the source code. I will show you an example of setting the title
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
|
3. Vue display highlight
The introduction of highlight between vue and laravel is a bit different
Introduction in laravel
1 2 3 |
|
Introduction in vue
1 2 3 4 5 6 7 8 9 10 |
|
Usage is<p v-html="Marked" v-highlight>
4. Log in and register
I originally only did article presentations, but I felt that the skills used were a bit Less, I just want to do more, and then I started to log in, register and comment. I used token authentication to log in and register. The backend is very simple. I picked out a good article on Vue and recommended it to everyone to use vue vuex axios to log in. , registration page permission interception. After reading it, it was very helpful to me.
5. Upload GitHub
After uploading GitHub, you need to clone it locallynpm install
, andnpm run dev
Error reported at this time Error: No PostCSS Config found in...
For the solution, please refer to postcss configuration
The above is the entire content of this article, I hope it will be helpful to everyone’s learning Helpful, please pay attention to the PHP Chinese website for more related content!
Related recommendations:
Usage of Macroable macros in Laravel
The above is the detailed content of About how to write a blog using Vue-laravel to separate the front-end and back-end. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Laravel is a PHP framework for easy building of web applications. It provides a range of powerful features including: Installation: Install the Laravel CLI globally with Composer and create applications in the project directory. Routing: Define the relationship between the URL and the handler in routes/web.php. View: Create a view in resources/views to render the application's interface. Database Integration: Provides out-of-the-box integration with databases such as MySQL and uses migration to create and modify tables. Model and Controller: The model represents the database entity and the controller processes HTTP requests.

Vue.js is a progressive JavaScript framework released by You Yuxi in 2014 to build a user interface. Its core advantages include: 1. Responsive data binding, automatic update view of data changes; 2. Component development, the UI can be split into independent and reusable components.

When developing websites using CraftCMS, you often encounter resource file caching problems, especially when you frequently update CSS and JavaScript files, old versions of files may still be cached by the browser, causing users to not see the latest changes in time. This problem not only affects the user experience, but also increases the difficulty of development and debugging. Recently, I encountered similar troubles in my project, and after some exploration, I found the plugin wiejeben/craft-laravel-mix, which perfectly solved my caching problem.

Laravel provides a comprehensive Auth framework for implementing user login functions, including: Defining user models (Eloquent model), creating login forms (Blade template engine), writing login controllers (inheriting Auth\LoginController), verifying login requests (Auth::attempt) Redirecting after login is successful (redirect) considering security factors: hash passwords, anti-CSRF protection, rate limiting and security headers. In addition, the Auth framework also provides functions such as resetting passwords, registering and verifying emails. For details, please refer to the Laravel documentation: https://laravel.com/doc

Article summary: This article provides detailed step-by-step instructions to guide readers on how to easily install the Laravel framework. Laravel is a powerful PHP framework that speeds up the development process of web applications. This tutorial covers the installation process from system requirements to configuring databases and setting up routing. By following these steps, readers can quickly and efficiently lay a solid foundation for their Laravel project.

The Laravel framework has built-in methods to easily view its version number to meet the different needs of developers. This article will explore these methods, including using the Composer command line tool, accessing .env files, or obtaining version information through PHP code. These methods are essential for maintaining and managing versioning of Laravel applications.

Vue.js' role in web development is to act as a progressive JavaScript framework that simplifies the development process and improves efficiency. 1) It enables developers to focus on business logic through responsive data binding and component development. 2) The working principle of Vue.js relies on responsive systems and virtual DOM to optimize performance. 3) In actual projects, it is common practice to use Vuex to manage global state and optimize data responsiveness.

Want to learn the Laravel framework, but suffer from no resources or economic pressure? This article provides you with free learning of Laravel, teaching you how to use resources such as online platforms, documents and community forums to lay a solid foundation for your PHP development journey from getting started to master.
