vieter-v
/
v
2
0
Fork 0
Code Issues Pull Requests Releases Activity

tutorials: vweb: add an article

pull/3091/head
Alexander Medvednikov 2019-12-15 00:55:05 +03:00
parent fc33f9d49c
commit 48ea136a9a
5 changed files with 106 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
tutorials/building-a-simple-web-blog-with-vweb.md
View File

@ -317,6 +317,69 @@ article := app.retrieve_article(10) or {
> `db := app.db` is a temporary limitation in the > `db := app.db` is a temporary limitation in the
V ORM, soon this will not be needed. V ORM, soon this will not be needed.
### Adding new articles
Create `new.html`:
```html
<html>
<header>
<title>V Blog</title>
</header>
<body>
<form action='/new_article' method='post'>
<input type='text' placeholder='Title' name='title'> <br>
<textarea placeholder='Text' name='text'></textarea>
<input type='submit'>
</form>
</body>
</html>
```
```v
pub fn (app mut App) new_article() {
title := app.vweb.form['title']
text := app.vweb.form['text']
if title == '' || text == '' {
app.vweb.text('Empty text/titile')
return
}
article := Article{
title: title
text: text
}
db := app.db
db.insert(article)
app.vweb.redirect('/article/')
}
```
> Untyped `form['key']` is temporary. Very soon Vweb will accept query and form
parameters via function arguments: `new_article(title, text string) {`.
We need to update `index.html` to add a link to the "new article" page:
<a href='/new'>New article</a>
### JSON endpoints
This tutorial used the traditional server side rendering. If you prefer
to render everything on the client or need an API, creating JSON endpoints
in V is very simple:
```v
pub fn (app mut App) articles() {
articles := app.find_all_articles()
app.vweb.json(json.encode(articles))
}
```
<img width=662 src="https://github.com/vlang/v/blob/master/tutorials/img/articles_json.png?raw=true">
To be continued on Dec 14... To be continued on Dec 14...
For an example of a more sophisticated web app written in V, check out Vorum: https://github.com/vlang/vorum For an example of a more sophisticated web app written in V, check out Vorum: https://github.com/vlang/vorum

27
tutorials/code/blog/blog.v
View File

@ -4,6 +4,7 @@ import (
vweb vweb
time time
pg pg
json
) )
struct App { struct App {
@ -42,6 +43,32 @@ pub fn (app mut App) init() {
app.db = db app.db = db
} }
pub fn (app mut App) new() {
$vweb.html()
}
pub fn (app mut App) new_article() {
title := app.vweb.form['title']
text := app.vweb.form['text']
if title == '' || text == '' {
app.vweb.text('Empty text/titile')
return
}
article := Article{
title: title
text: text
}
println(article)
db := app.db
db.insert(article)
app.vweb.redirect('/article/')
}
pub fn (app mut App) articles() {
articles := app.find_all_articles()
app.vweb.json(json.encode(articles))
}
fn (app mut App) time() { fn (app mut App) time() {
app.vweb.text(time.now().format()) app.vweb.text(time.now().format())
} }

2
tutorials/code/blog/index.html
View File

@ -9,6 +9,8 @@
@article.text @article.text
</div> </div>
@end @end
<br>
<a href='/new'>New article</a>
</body> </body>
</html> </html>

13
tutorials/code/blog/new.html 100644
View File

@ -0,0 +1,13 @@
<html>
<header>
<title>V Blog</title>
</header>
<body>
<form action='/new_article' method='post'>
<input type='text' placeholder='Title' name='title'> <br>
<textarea placeholder='Text' name='text'></textarea>
<input type='submit'>
</form>
</body>
</html>

2
vlib/compiler/fn.v
View File

@ -633,7 +633,7 @@ fn (p mut Parser) check_unused_and_mut_vars() {
} }
if !var.is_changed && var.is_mut && !p.pref.is_repl && if !var.is_changed && var.is_mut && !p.pref.is_repl &&
!p.pref.translated && var.typ != 'T*' && !p.pref.translated && var.typ != 'T*' &&
p.mod != 'ui' p.mod != 'ui' && var.typ != 'App*'
{ {
p.error_with_token_index('`$var.name` is declared as mutable, but it was never changed', var.token_idx ) p.error_with_token_index('`$var.name` is declared as mutable, but it was never changed', var.token_idx )
} }